import useUserStore from '@/store/modules/user';
const pinias = useUserStore();
const chartOption = {
option1: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#333',
},
data: ['小时水量']
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [1, 2],
axisLabel: {
color: '#333',
rotate: 90
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: '',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
],
series: [{ type: 'line', smooth: true, data: [12, 34] }],
},
option11: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
alwaysShowContent: false, //是否永远显示提示框
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无风险',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '2%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: 'inherit',
},
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [1, 2],
axisLabel: {
color: '#c6c6c6',
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: '',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#c6c6c6', //字体颜色
fontSize: 12, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
},
axisLabel: {
color: '#c6c6c6',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
],
series: [{ type: 'line', smooth: true, data: [12, 34] }],
},
option2: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '2%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: 'inherit',
},
},
xAxis: [
{
type: 'category',
data: ['1', '3'],
axisLabel: {
color: '#c6c6c6',
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: '小时降雨量(mm)',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#c6c6c6', //字体颜色
fontSize: 12, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
axisLabel: {
color: '#c6c6c6',
},
},
{
name: '累计降雨量(mm)',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#c6c6c6', //字体颜色
fontSize: 12, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
},
axisLabel: {
color: '#c6c6c6',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
],
series: [
{
name: '小时降雨量',
type: 'bar',
barWidth: 2, // 设置柱子的最大宽度为30
yAxisIndex: 0,
data: [12, 23],
},
{
name: '累计降雨量',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbolSize: 8,
data: [13, 20],
},
],
},
option22: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '2%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: 'inherit',
},
},
xAxis: [
{
type: 'category',
data: ['1', '3'],
axisLabel: {
color: '#c6c6c6',
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: '预报雨量(mm)',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#c6c6c6', //字体颜色
fontSize: 12, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
axisLabel: {
color: '#c6c6c6',
},
},
{
name: '预计累计雨量(mm)',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#c6c6c6', //字体颜色
fontSize: 12, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
},
axisLabel: {
color: '#c6c6c6',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
],
series: [
{
name: '预报雨量',
type: 'bar',
barWidth: 2, // 设置柱子的最大宽度为30
yAxisIndex: 0,
data: [12, 23],
},
{
name: '预计累计雨量',
type: 'line',
smooth: true,
yAxisIndex: 1,
symbolSize: 8,
data: [13, 20],
},
],
},
option3: {
color: pinias.$state.chartColor,
grid: {
bottom: 0,
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}处 ({d}%)',
},
legend: {
orient: 'vertical',
right: 10,
y: 'center',
icon: 'circle',
textStyle: {
color: '#c6c6c6',
},
formatter: name => {
let v;
chartOption.option3.series.data.forEach(item => {
if (item.name === name) {
v = item.value;
}
});
return name + ' ' + v + ' 处';
},
},
series: {
type: 'pie',
radius: ['55%', '75%'],
center: ['30%', '50%'],
label: {
show: false,
position: 'outer',
},
labelLine: {
length: 30,
show: false,
},
data: [
{ value: 135.6, name: '低风险区域' },
{ value: 73.5, name: '中风险区域' },
{ value: 12.5, name: '高风险区域' },
],
},
},
option4: {
color: pinias.$state.chartColor,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
title: {
left: 'center',
text: '',
textStyle: {
color: '#333', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '15%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#333',
},
data: [],
},
xAxis: {
type: 'category',
data: ['1', '2'],
axisLabel: {
color: '#333',
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
yAxis: [
{
name: '降雨量(mm)',
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#333', //字体颜色
fontSize: 12, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
],
series: [{ name: '降雨量', type: 'bar', barWidth: 2, data: [12, 34] }],
},
option5: {
color: pinias.$state.chartColor,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
title: {
left: 'center',
text: '',
textStyle: {
color: '#333', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '15%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#333',
},
data: ['流量', '降雨量']
},
xAxis: {
type: 'category',
data: ['1', '2'],
axisLabel: {
color: '#333',
rotate: 90
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
yAxis: [
{
name: `流量(m³/h)`,
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
{
name: `降雨量(mm)`,
inverse: true,
type: 'value',
nameLocation: 'start', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
}
],
series: [
{
name: `流量`,
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 1,
color: "#A66BFF", // 线条颜色
},
borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: {
color: "rgba(166,107,255,1)",
borderColor: "#A66BFF",
borderWidth: 1
},
tooltip: {
show: true
},
data: [12, 34],
}, {
name: `降雨量`,
type: 'bar',
yAxisIndex: 1,
data: [12, 34],
barWidth: 2,
itemStyle: {
color: pinias.$state.chartColor,
},
},
],
},
option7: {
color: pinias.$state.chartColor,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
confine: true, //是否将 tooltip 框限制在图表的区域内
},
title: {
left: 'center',
text: '',
textStyle: {
color: '#333', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '15%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#333',
},
data: ['水位', '降雨量']
},
xAxis: {
type: 'category',
data: ['1', '2'],
axisLabel: {
color: '#333',
rotate: 90
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
yAxis: [
{
name: `水位(m)`,
type: 'value',
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
{
name: `降雨量(mm)`,
inverse: true,
type: 'value',
nameLocation: 'start', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
}
],
series: [
{
name: `水位`,
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 1,
color: "#A66BFF", // 线条颜色
},
borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: {
color: "rgba(166,107,255,1)",
borderColor: "#A66BFF",
borderWidth: 1
},
tooltip: {
show: true
},
data: [12, 34],
}, {
name: `降雨量`,
type: 'bar',
yAxisIndex: 1,
data: [12, 34],
barWidth: 2,
itemStyle: {
color: pinias.$state.chartColor,
},
},
],
},
option6: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
alwaysShowContent: false, //是否永远显示提示框
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#000000',
},
data: ['流量', '水位']
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [1, 2],
axisLabel: {
color: '#333',
rotate: 90
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: `流量(m³/h)`,
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
{
name: `水位(m)`,
nameLocation: 'end',
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
}
],
series: [{
name: '流量', type: 'line', smooth: true, data: [12, 34],
lineStyle: {
normal: {
width: 1,
color: "#A66BFF", // 线条颜色
},
borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: {
color: "rgba(166,107,255,1)",
borderColor: "#A66BFF",
borderWidth: 1
}
}, { name: '水位', type: 'line', smooth: true, data: [12, 34], yAxisIndex: 1 }],
},
option8: {
color: pinias.$state.chartColor,
tooltip: {
trigger: 'axis',
alwaysShowContent: false, //是否永远显示提示框
confine: true, //是否将 tooltip 框限制在图表的区域内
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: true, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
title: {
left: 'left',
text: '',
top: 10,
bottom: 10,
left: 10,
textStyle: {
color: '#545E75', //字体颜色
fontSize: 16, //字体大小
},
},
grid: {
left: '3%',
right: '3%',
top: '25%',
bottom: '3%',
containLabel: true,
},
legend: {
top: '8%',
orient: 'horizontal', //horizontal
left: 'center', //left ,center
textStyle: {
color: '#000000',
},
data: ['流量', '悬浮物固体浓度']
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [1, 2],
axisLabel: {
color: '#333',
rotate: 90
},
axisLine: {
lineStyle: {
color: '#066592',
},
},
},
],
yAxis: [
{
name: `流量(m³/h)`,
nameLocation: 'end', // 坐标轴名称显示位置
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
},
{
name: `悬浮物固体浓度(mg/L)`,
nameLocation: 'end',
nameGap: 10, // 坐标轴名称与轴线之间的距离
nameTextStyle: {
color: '#000000', //字体颜色
fontSize: 13, //字体大小
align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
padding: [0, 0, 0, 0]
},
axisLabel: {
color: '#333',
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#066592',
},
},
}
],
series: [{
name: '流量', type: 'line', smooth: true, data: [12, 34],
lineStyle: {
normal: {
width: 1,
color: "#A66BFF", // 线条颜色
},
borderColor: 'rgba(0,0,0,.4)',
},
itemStyle: {
color: "rgba(166,107,255,1)",
borderColor: "#A66BFF",
borderWidth: 1
},
tooltip: {
show: true
},
}, { name: '悬浮物固体浓度', type: 'line', smooth: true, data: [12, 34], yAxisIndex: 1 }],
},
};
export default chartOption;
