import * as echarts from 'echarts';
import useUserStore from '@/store/modules/user';
const pinias = useUserStore();
const chartOption = {
//排水一张图 管网资产饼图
floodOneMapPipePie: {
color: pinias.$state.chartColor,
legend: {
top: '20%',
right: '6%',
type: 'scroll',
orient: 'vertical',
textStyle: {
color: '#ccc',
fontSize: 14,
},
},
tooltip: {
show: true,
},
series: [
{
type: 'pie',
radius: ['55%', '75%'],
center: ['30%', '40%'],
label: {
show: false,
position: 'center',
},
labelLine: {
length: 30,
show: false,
},
data: [
{ value: 135.6, name: '一级主干' },
{ value: 83.5, name: '二级主干' },
{ value: 10.5, name: '支干管网' },
],
},
],
},
//排水一张图 降雨场次统计饼图
floodOneMapRainStatic: {
legend: {
top: '20%',
right: '2%',
type: 'scroll',
orient: 'vertical',
textStyle: {
color: '#ccc',
fontSize: 14,
},
},
tooltip: {
show: true,
},
series: [
{
type: 'pie',
radius: ['55%', '75%'],
center: ['30%', '40%'],
label: {
show: false,
position: 'center',
},
labelLine: {
length: 30,
show: false,
},
data: [
{ value: 10, name: '1年1遇' },
{ value: 5, name: '2年1遇' },
{ value: 4, name: '5年1遇' },
{ value: 2, name: '10年1遇' },
],
},
],
},
// 排水一张图 物联感知管网监测历史趋势
floodOneMapPipeSupervise: {
grid: {
top: '40px',
left: '45px',
right: '47px',
bottom: '40px',
},
animation: true,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['SS', '流量'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
color: '#00D1FF',
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00'],
},
],
yAxis: [
{
name: 'SS(mg/l)',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
{
name: 'm³/s',
type: 'value',
textStyle: {
color: '#00D1FF',
},
splitLine: {
//x网格样式
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
},
],
series: [
{
name: 'SS',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
width: 2,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [ 0.5, 0.1, 0.7, 0.9, 0.1, 0.6, 0.3, 0.7, 0.2, 0.8, 0.6,1.2],
},
{
name: '流量',
type: 'line',
symbol: 'none',
yAxisIndex: 1,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [2, 1.3, 1.4, 2.5, 1.7, 2.0, 1.3, 1.0, 1.6, 0.9, 0.7, 3.4],
},
],
},
// 排水一张图 监测告警
floodOneMapPipeWarns: {
grid: {
top: '40px',
left: '45px',
right: '47px',
bottom: '40px',
},
animation: true,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['SS', '流量'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
color: '#00D1FF',
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '0:00', ' 1:00'
],
},
],
yAxis: [
{
name: 'SS(mg/l)',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
{
name: 'm³/s',
type: 'value',
textStyle: {
color: '#00D1FF',
},
splitLine: {
//x网格样式
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
},
],
series: [
{
name: 'SS',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
width: 2,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
5.5, 5.1, 5.7, 5.9, 6.1, 6.6, 6.3, 6.7, 6.2, 5.8, 5.6, 5.4, 5.2, 5.0, 4.8, 5.3, 5.1, 5.5, 5.2, 5.3, 5.6, 5.8, 6.3, 6.5
],
},
{
name: '流量',
type: 'line',
symbol: 'none',
yAxisIndex: 1,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [10, 13, 13.4, 15, 17, 20, 33, 40, 45, 50, 43.7, 42, 38, 36, 35, 38, 41, 41, 43, 38, 28, 20, 15, 13],
},
],
},
//管网监测水位
floodOneMapPipewater: {
grid: {
top: '40px',
left: '45px',
right: '47px',
bottom: '40px',
},
animation: true,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['SS', '流量'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
color: '#00D1FF',
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '0:00', ' 1:00'
],
},
],
yAxis: [
{
name: 'SS(mg/l)',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
{
name: 'm³/s',
type: 'value',
textStyle: {
color: '#00D1FF',
},
splitLine: {
//x网格样式
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
},
],
series: [
{
name: 'SS',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
width: 2,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
5.5, 5.1, 5.7, 5.9, 6.1, 6.6, 6.3, 6.7, 6.2, 5.8, 5.6, 5.4, 5.2, 5.0, 4.8, 5.3, 5.1, 5.5, 5.2, 5.3, 5.6, 5.8, 6.3, 6.5
],
},
{
name: '流量',
type: 'line',
symbol: 'none',
yAxisIndex: 1,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [10, 13, 13.4, 15, 17, 20, 33, 40, 45, 50, 43.7, 42, 38, 36, 35, 38, 41, 41, 43, 38, 28, 20, 15, 13],
},
],
},
//排水一张图 物联感知管网监测统计分析
floodOneMapPipeStatic: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['白天', '夜间'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
},
],
yAxis: [
{
name: 'SS(mg/l)',
type: 'value',
textStyle: {
color: '#00D1FF',
},
formatter: '{value} ',
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
],
series: [
{
name: '白天',
symbolSize: 5,
data: [
['6:00', 5.5],
['7:00', 5.1],
['8:00', 5.1],
['9:00', 5.7],
['10:00', 5.9],
['11:00', 6.1],
['12:00', 6.6],
['13:00', 6.3],
['14:00', 6.7],
['15:00', 6.2],
['16:00', 5.8],
['17:00', 5.6],
],
type: 'scatter',
},
{
name: '夜间',
symbolSize: 5,
data: [
['18:00', 5.4],
['19:00', 5.2],
['20:00', 5.0],
['21:00', 5.5],
['22:00', 5.3],
['23:00', 5.1],
['24:00', 5.2],
['1:00', 5.3],
['2:00', 5.6],
['3:00', 5.3],
['4:00', 5.2],
['5:00', 6.5],
],
type: 'scatter',
},
],
},
//排水一张图 物联感知积水点历史趋势
floodOneMapJSDTrend: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['积水深度'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
],
},
yAxis: {
name: '单位：mm',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: [
{
name: '积水深度',
type: 'line',
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1, 177, 220, 0.8)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(1, 177, 220, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [0, 1, 1.5, 2.4, 2.6, 3, 3.1, 3.5, 4, 4.5, 4.2, 3.8, 3.4, 3.8, 3.6, 3.5, 3.0, 2.9, 2.6, 2.5, 2.3, 1.5, 1.1, 0],
},
],
},
//排水一张图 厂站监测历史数据
floodOneMapDataByPumpCode: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: [],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [],
},
yAxis: {
name: '',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: {
name: '',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#eee73c',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [],
},
},
//排水一张图 风险研判降雨预报
floodOneMapFXrain: {
color: pinias.$state.chartColor,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
grid: {
top: '40px',
left: '10%',
right: '40px',
bottom: '30%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['实测雨量', '预报雨量'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLabel: {
formatter: '{value} ',
color: '#00D1FF',
rotate: 45,
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
data: ['14:00', '14:10', '14:20', '14:30', '14:40', '14:50', '15:00', '15:10', '15:20', '15:30', '15:40', '15:50', '16:00'],
},
],
yAxis: [
{
name: 'mm',
type: 'value',
textStyle: {
color: '#00D1FF',
},
splitNumber: 3,
formatter: '{value} ',
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
],
series: [
{
name: '实测雨量',
symbolSize: 5,
data: [5.5, 5.1, 5.1, 5.7],
type: 'bar',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(1, 183, 226,1)' },
{ offset: 0.5, color: 'rgba(1, 183, 226,0.5)' },
{ offset: 1, color: 'rgba(1, 183, 226,0.2)' },
]),
},
},
{
name: '预报雨量',
data: [, , , , 5.4, 5.2, 5.0, 5.5, 5.3, 5.1, 5.2, 5.3],
type: 'bar',
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(1, 220, 154,1)' },
{ offset: 0.5, color: 'rgba(1, 220, 154,0.5)' },
{ offset: 1, color: 'rgba(1, 220, 154,0.2)' },
]),
},
},
],
},
//排水一张图 入河排口统计
floodOneMapPSPK: {
color: pinias.$state.chartColor,
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
grid: {
top: '15%',
left: '8%',
right: '5%',
bottom: '10%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['雨水排口', '合流制溢流排口'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
type: 'category',
//boundaryGap: false,
axisLabel: {
formatter: '{value} ',
color: '#00D1FF',
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
data: [],
},
],
yAxis: [
{
name: '个',
type: 'value',
textStyle: {
color: '#00D1FF',
},
minInterval: 1,
formatter: '{value} ',
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
],
series: [
{
name: '雨水排口',
data: [],
type: 'bar',
barWidth: 20,
},
{
name: '合流制溢流排口',
data: [],
type: 'bar',
barWidth: 20,
},
],
},
//弹窗 趋势分析折线图
popupTrend: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['前池液位', '1#液位'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
],
},
yAxis: {
name: '单位：m',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: [
{
name: '前池液位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
3.5, 3, 4.5, 5, 5.1, 5.3, 5.1, 5.5, 5.4, 5.5, 5.2, 5.8, 5.4, 5.8, 5.6, 5.5, 4, 3.9, 3.6, 3.5, 3.3, 3.5, 3.1, 3
],
},
{
name: '1#液位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
2.5, 2, 3.5, 4, 4.1, 4.3, 4.1, 4.5, 4.4, 4.4, 4.2, 4.8, 4.4, 4.8, 4.6, 4.5, 3, 2.9, 2.6, 2.5, 2.3, 2.5, 2.1, 2
],
},
],
},
//降雨量
popupRainTrend: {
color: pinias.$state.chartColor,
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: [],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [],
},
yAxis: {
name: '',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: {
name: '',
type: 'bar',
data: [],
},
},
//弹窗 渍水点折线图
popupTrendZS: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '25%',
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['水位'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
color: '#00D1FF',
// rotate: 30,
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
' 2:00', ' 3:00', ' 4:00', ' 5:00', ' 6:00', ' 7:00', ' 8:00', ' 9:00', ' 10:00', ' 11:00', ' 12:00', ' 13:00', ' 14:00', ' 15:00', ' 16:00', ' 17:00', ' 18:00', ' 19:00', ' 20:00', ' 21:00', ' 22:00', ' 23:00', '2009/6/13 0:00', ' 1:00'
],
},
yAxis: {
name: '单位：m',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: [
{
name: '水位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#01B1DC',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
0.1, 0.13, 0.134, 0.15, 0.17, 0.2, 0.33, 0.4, 0.45, 0.5, 0.437, 0.42, 0.38, 0.36, 0.35, 0.38, 0.41, 0.41, 0.43, 0.38, 0.28, 0.2, 0.15, 0.13
],
},
],
},
//河道监测
popupTrendRiver: {
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['水位'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [],
},
yAxis: {
name: 'm',
type: 'value',
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: {
name: '水位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 2,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [],
},
},
// 排水一张图 风险研判沿程水位
floodOneMapWaterLevel: {
grid: {
top: '40px',
left: '40px',
right: '70px',
bottom: '40px',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['警戒水位', '当前水位', '河底高程', '左岸', '右岸'],
textStyle: {
color: '#00D1FF',
fontsize: 14,
},
},
xAxis: [
{
name: '单位：m',
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#00D1FF',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
// prettier-ignore
data: [
0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700
],
},
],
yAxis: [
{
name: '单位：m',
type: 'value',
scale: true,
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: true,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
],
series: [
{
name: '左岸',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
width: 2,
color: '#b9a5ff',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
18.2, 18.5, 18.7, 18.9, 19.1, 19.2, 19.3, 19.4, 19.5, 19.6, 19.7, 19.9, 20, 20.1, 20.1, 20.2, 20, 20, 19.8, 19.6, 19.5, 19.3, 19.2, 19.1, 18.9, 18.7, 18.5, 18.3, 18.2
],
},
{
name: '右岸',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
width: 2,
color: '#90ffc4',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
18.3, 18.6, 18.7, 18.8, 18.9, 19.1, 19.2, 19.5, 19.4, 19.4, 19.5, 19.7, 19.9, 20, 20.1, 20.1, 19.9, 19.9, 19.8, 19.6, 19.5, 19.3, 19.2, 19.1, 18.9, 18.8, 18.6, 18.6, 18.3
],
},
{
name: '当前水位',
type: 'line',
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(21, 182, 228, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(21, 182, 228, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#9ccdf7',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
16, 16, 16, 16, 16, 16, 16, 16.1, 16.1, 16.1, 16.1, 16.1, 16.1, 16.1, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16
],
},
{
name: '警戒水位',
type: 'line',
symbol: 'none',
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 2,
color: '#ee6666',
type: 'dashed',
},
},
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
],
},
{
name: '河底高程',
type: 'line',
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(215, 207, 143, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(215, 207, 143, 0.1)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
width: 1,
color: '#d7cf8f',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
15.6, 15.5, 14.7, 14.5, 14.1, 13.5, 13.3, 12.9, 12.5, 12.6, 12.7, 12.6, 12.6, 12.8, 13, 13.1, 13.3, 13.4, 13.6, 13.9, 14.2, 14.5, 14.5, 14.7, 14.8, 15, 15.1, 15.3, 15.5, 15.6],
},
],
},
// 排水一张图 态势研判 河湖风险研判
floodOneMapFXYP: {
grid: {
top: '40px',
left: '40px',
right: '5%',
bottom: '10%',
},
// 显示暂无数据
graphic: {
type: 'text', // 类型：文本
left: 'center',
top: 'middle',
silent: true, // 不响应事件
invisible: false, // 有数据就隐藏
style: {
fill: '#c6c6c6',
fontWeight: 'bold',
text: '暂无数据',
fontFamily: 'Microsoft YaHei',
fontSize: '18px',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765',
},
},
},
legend: {
data: ['当前水深', '河床'],
textStyle: {
color: '#00D1FF',
fontsize: 13,
},
},
xAxis: [
{
name: '',
type: 'category',
boundaryGap: false,
axisLabel: {
fontSize: 12,
color: '#00D1FF',
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
data: [],
},
],
yAxis: {
name: '单位：m',
type: 'value',
scale: true,
textStyle: {
color: '#00D1FF',
},
axisLine: {
show: false,
lineStyle: {
color: '#00D1FF', //刻度线的颜色
},
},
splitLine: {
//x网格样式
show: false,
lineStyle: {
color: '#00D1FF',
type: 'dashed',
},
},
},
series: [
{
name: '当前水位',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
color: 'rgba(156, 205, 247, 0.5)',
},
// 填充区域的样式
areaStyle: {
// 填充色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: 'rgba(156, 205, 247, 0.3)' },
{ offset: 0, color: 'rgba(156, 205, 247, 1)' },
]),
},
data: [],
},
{
name: '河床',
type: 'line',
symbol: 'none',
smooth: true,
lineStyle: {
color: 'rgba(215, 207, 143, 0.5)',
},
// 填充区域的样式
areaStyle: {
// 填充色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: 'rgba(215, 207, 143, 0.3)' },
{ offset: 0, color: 'rgba(215, 207, 143, 1)' },
]),
},
data: [],
// 设防水位线
markLine: {
silent: true,
symbol: ['circle', 'arrow'], // none为标线两端的样式为无，可更改
data: [
{
yAxis: 19, // 警戒线位置，这个赋值为纵轴50
lineStyle: { type: 'dashed', color: 'red', width: 1 }, // 样式： 线型、颜色、线宽
label: {
show: true,
position: 'middle', // 文字位置
formatter: '设防水位 19m', //文字
color: 'red', // 文字颜色
},
},
],
},
},
],
},
};
export default chartOption;
