- 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;