import * as echarts from 'echarts';
const chartOption = {
//排水一张图 官网资产饼图
floodOneMapPipePie: {
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: 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: '40px',
right: '40px',
bottom: '40px',
},
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: {
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: '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
],
},
],
},
//排水一张图 风险研判降雨预报
floodOneMapFXrain: {
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', //刻度线的颜色
},
},
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',
},
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',
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',
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)' },
]),
},
},
],
},
//弹窗 趋势分析折线图
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
],
},
],
},
//弹窗 渍水点折线图
popupTrendZS: {
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: '单位：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
],
},
{
name: '预警水位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#D9D237',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45,
],
},
{
name: '报警水位',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#ee6666',
},
emphasis: {
focus: 'series',
},
// prettier-ignore
data: [
0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55,0.55, 0.55,
],
},
],
},
};
export default chartOption;
