版本 "echarts": "^4.1.0",
效果图
<template>
<div>
<div id="main" style="height:500px;"></div>
</div>
</template>
<script>
export default {
mounted() {
this.init()
},
methods: {
getMyLevel(data,flag){
if(flag!=null){
if(data==1){
return "I";
}else if(data==2){
return "II";
}else if(data==3){
return "III";
}else if(data==4){
return "IV";
}else if(data==5){
return "V";
}else if(data==6){
return "VI";
}
}else {
if (data == 1) {
return "I类";
} else if (data == 2) {
return "II类";
} else if (data == 3) {
return "III类";
} else if (data == 4) {
return "IV类";
} else if (data == 5) {
return "V类";
} else if (data == 6) {
return "VI类";
}
}
},
init() {
var myChart = this.$echarts.init(document.getElementById('main'));
// var data = {
// "goal": 3,
// "levelList": null,
// "listAvgFlow": [],
// "list": [
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 2,
// "watertemp": 24,
// "ph": 8,
// "do1": 6.6,
// "conductivity": 346.1,
// "turbidity": 32.5,
// "permanganate": null,
// "tp": null,
// "tn": null,
// "nh3n": null,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 2,
// "permanganate_level": 0,
// "tp_level": 0,
// "nh3n_level": 0,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "13",
// "monitoredtime": "2021-05-13T00:00:00.000+0800",
// "level": 2,
// "value": 2
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 1,
// "watertemp": 24.1,
// "ph": 8,
// "do1": 7.6,
// "conductivity": 335.6,
// "turbidity": 27.3,
// "permanganate": null,
// "tp": null,
// "tn": null,
// "nh3n": null,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 0,
// "tp_level": 0,
// "nh3n_level": 0,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "12",
// "monitoredtime": "2021-05-12T00:00:00.000+0800",
// "level": 1,
// "value": 1
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 23.8,
// "ph": 8,
// "do1": 8,
// "conductivity": 325.5,
// "turbidity": 23.9,
// "permanganate": 3.2,
// "tp": 0.107,
// "tn": 1.67,
// "nh3n": 0.44,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 2,
// "tp_level": 3,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "11",
// "monitoredtime": "2021-05-11T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 24,
// "ph": 8,
// "do1": 7.4,
// "conductivity": 317.9,
// "turbidity": 23.6,
// "permanganate": 3.8,
// "tp": 0.111,
// "tn": 1.76,
// "nh3n": 0.42,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 2,
// "permanganate_level": 2,
// "tp_level": 3,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "10",
// "monitoredtime": "2021-05-10T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 24.5,
// "ph": 8,
// "do1": 7.2,
// "conductivity": 315.5,
// "turbidity": 22.3,
// "permanganate": 3.9,
// "tp": 0.11,
// "tn": 1.76,
// "nh3n": 0.43,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 2,
// "permanganate_level": 2,
// "tp_level": 3,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "09",
// "monitoredtime": "2021-05-09T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 23.9,
// "ph": 8,
// "do1": 7.1,
// "conductivity": 320.7,
// "turbidity": 20.6,
// "permanganate": 3.6,
// "tp": 0.108,
// "tn": 1.7,
// "nh3n": 0.44,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 2,
// "permanganate_level": 2,
// "tp_level": 3,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "08",
// "monitoredtime": "2021-05-08T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 2,
// "watertemp": 23.2,
// "ph": 8,
// "do1": 7.2,
// "conductivity": 331.3,
// "turbidity": 16.5,
// "permanganate": 3,
// "tp": 0.092,
// "tn": 1.63,
// "nh3n": 0.37,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 2,
// "permanganate_level": 2,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "07",
// "monitoredtime": "2021-05-07T00:00:00.000+0800",
// "level": 2,
// "value": 2
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 2,
// "watertemp": 23.5,
// "ph": 8,
// "do1": 7.9,
// "conductivity": 331.1,
// "turbidity": 13.8,
// "permanganate": 3,
// "tp": 0.081,
// "tn": 1.61,
// "nh3n": 0.33,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 2,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "06",
// "monitoredtime": "2021-05-06T00:00:00.000+0800",
// "level": 2,
// "value": 2
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 23.7,
// "ph": 8,
// "do1": 9.3,
// "conductivity": 302.7,
// "turbidity": 10.4,
// "permanganate": 4.5,
// "tp": 0.071,
// "tn": 1.6,
// "nh3n": 0.27,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 3,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "05",
// "monitoredtime": "2021-05-05T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 23.7,
// "ph": 8,
// "do1": 8.9,
// "conductivity": 286.3,
// "turbidity": 11.4,
// "permanganate": 5.3,
// "tp": 0.076,
// "tn": 1.71,
// "nh3n": 0.33,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 3,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "04",
// "monitoredtime": "2021-05-04T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 23.8,
// "ph": 8,
// "do1": 9.3,
// "conductivity": 273.1,
// "turbidity": 15.2,
// "permanganate": 5.5,
// "tp": 0.084,
// "tn": 1.89,
// "nh3n": 0.41,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 3,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "03",
// "monitoredtime": "2021-05-03T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 25,
// "ph": 9,
// "do1": 11.7,
// "conductivity": 256.3,
// "turbidity": 18.7,
// "permanganate": 5.9,
// "tp": 0.099,
// "tn": 2.03,
// "nh3n": 0.46,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 3,
// "tp_level": 2,
// "nh3n_level": 2,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "02",
// "monitoredtime": "2021-05-02T00:00:00.000+0800",
// "level": 3,
// "value": 3
// },
// {
// "isiteid": 78,
// "ssitename": "养鹿渡口",
// "riverid": 136,
// "srivername": "小江",
// "idistrictid": 500235000000,
// "sdistrictname": "开州区",
// "waterLevel": 3,
// "watertemp": 24.4,
// "ph": 9,
// "do1": 10.2,
// "conductivity": 252.4,
// "turbidity": 30.5,
// "permanganate": 5.6,
// "tp": 0.117,
// "tn": 2.27,
// "nh3n": 0.6,
// "COD": null,
// "chlorophyll-a": null,
// "ph_level": 1,
// "do1_level": 1,
// "permanganate_level": 3,
// "tp_level": 3,
// "nh3n_level": 3,
// "COD_level": 0,
// "year": "2021",
// "month": "05",
// "day": "01",
// "monitoredtime": "2021-05-01T00:00:00.000+0800",
// "level": 3,
// "value": 3
// }
// ],
// "listAvgTemp": []
// }
var checkInfo = {
showItem: [
"level",
"ph",
"do1",
"permanganate",
"tp",
"nh3n",
"watertemp",
"conductivity",
"turbidity",
"tn",
"COD"
],
showName: [
"水质",
"PH值（无量纲）",
"溶解氧(mg/L)",
"高锰酸盐指数(mg/L)",
"总磷(mg/L)",
"氨氮(mg/L)",
"水温(℃)",
"电导率(μS/cm)",
"浊度(NTU)",
"总氮(mg/L)",
"化学需氧量(mg/L)"
]
}
// y轴位置规划
var mycolor = ['#8B668B', '#659ab0', '#28FF28', '#EEAD0E', "#1d4bfe", "#08cbff", "#2ad795", "#edc504", "#fb8f3c", "#f96464","#2bd895"];
// var xWidth = 35;
// var offsetParam = 1;
// if (checkInfo.showItem.length < 3) {
// offsetParam = checkInfo.showItem.length - 2;
// }
// var posions = [
// {offset: xWidth * (offsetParam + 1), position: "left"},
// {offset: xWidth * offsetParam, position: "left"},
// {position: "left"},
// {axisLine: {onZero: false}},
// {axisLine: {onZero: false}, offset: xWidth},
// {offset: xWidth * 2},
// {offset: xWidth * (offsetParam+2), position: "left"},
// {offset: xWidth * (offsetParam+3), position: "left"},
// {axisLine: {onZero: false},offset: xWidth * 3},
// {axisLine: {onZero: false},offset: xWidth * 4},
// {axisLine: {onZero: false},offset: xWidth * 4.8}
// ];
// var shuizhiIndex = -1;
// var valArr = {};
var timeArr = [1,2,3,4,5,6,7,8]
var myYAxis = [
{
"type": "value",
// 分割线
"splitLine": {
"show": false
},
// 坐标轴线
"axisLine": {
"lineStyle": {
color: 'red'
}
},
// 坐标轴文本标签，详见axis.axisLabel
"axisLabel": {},
// 偏移像素
"offset": 70,
// 位置 默认自适应
// "position": "right"
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#659ab0"
}
},
"axisLabel": {},
"offset": 35,
"position": "left"
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#28FF28"
}
},
"axisLabel": {},
"position": "left"
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#EEAD0E"
}
},
"axisLabel": {}
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#1d4bfe"
}
},
"axisLabel": {},
"offset": 35
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#08cbff"
}
},
"axisLabel": {},
"offset": 70
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#2ad795"
}
},
"axisLabel": {},
"offset": 105,
"position": "left"
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#edc504"
}
},
"axisLabel": {},
"offset": 140,
"position": "left"
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#fb8f3c"
}
},
"axisLabel": {},
"offset": 105
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#f96464"
}
},
"axisLabel": {},
"offset": 140
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"onZero": false,
"lineStyle": {
"color": "#2bd895"
}
},
"axisLabel": {},
"offset": 168
}];
// 对应每个图表系列
var mySeries = [
{
// 系列名称
"name": "水质",
// 系列中的数据内容
"data": [
3,
3,
3,
3,
3,
2,
2,
3,
3,
3,
3,
1,
2
],
// 系列图表类型
"type": "line",
// 折线图默认参数
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#8B668B"
}
}
},
"markPoint": {
"symbol": "pin", // 标注类型
"symbolSize": 40, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
"itemStyle": {
// "color": "#8B668B",
color: 'red',
"borderColor": "red",
"borderWidth": 100, // 标注边线线宽，单位px，默认为1
"borderType": "solid",
"normal": {
"label": {}
}
},
// 最大值最小值
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 0
},
{
"name": "PH值（无量纲）",
"data": [
9,
9,
8,
8,
8,
8,
8,
8,
8,
8,
8,
8,
8
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#659ab0"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#659ab0",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 1
},
{
"name": "溶解氧(mg/L)",
"data": [
10.2,
11.7,
9.3,
8.9,
9.3,
7.9,
7.2,
7.1,
7.2,
7.4,
8,
7.6,
6.6
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#28FF28"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#28FF28",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 2
},
{
"name": "高锰酸盐指数(mg/L)",
"data": [
5.6,
5.9,
5.5,
5.3,
4.5,
3,
3,
3.6,
3.9,
3.8,
3.2,
null,
null
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#EEAD0E"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#EEAD0E",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 3
},
{
"name": "总磷(mg/L)",
"data": [
0.117,
0.099,
0.084,
0.076,
0.071,
0.081,
0.092,
0.108,
0.11,
0.111,
0.107,
null,
null
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#1d4bfe"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#1d4bfe",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 4
},
{
"name": "氨氮(mg/L)",
"data": [
0.6,
0.46,
0.41,
0.33,
0.27,
0.33,
0.37,
0.44,
0.43,
0.42,
0.44,
null,
null
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#08cbff"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#08cbff",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 5
},
{
"name": "水温(℃)",
"data": [
24.4,
25,
23.8,
23.7,
23.7,
23.5,
23.2,
23.9,
24.5,
24,
23.8,
24.1,
24
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#2ad795"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#2ad795",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 6
},
{
"name": "电导率(μS/cm)",
"data": [
252.4,
256.3,
273.1,
286.3,
302.7,
331.1,
331.3,
320.7,
315.5,
317.9,
325.5,
335.6,
346.1
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#edc504"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#edc504",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 7
},
{
"name": "浊度(NTU)",
"data": [
30.5,
18.7,
15.2,
11.4,
10.4,
13.8,
16.5,
20.6,
22.3,
23.6,
23.9,
27.3,
32.5
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#fb8f3c"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#fb8f3c",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 8
},
{
"name": "总氮(mg/L)",
"data": [
2.27,
2.03,
1.89,
1.71,
1.6,
1.61,
1.63,
1.7,
1.76,
1.76,
1.67,
null,
null
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#f96464"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#f96464",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 9
},
{
"name": "化学需氧量(mg/L)",
"data": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"type": "line",
"itemStyle": {
"normal": {
"lineStyle": {
"color": "#2bd895"
}
}
},
"markPoint": {
"symbol": "pin",
"symbolSize": 40,
"itemStyle": {
"color": "#2bd895",
"borderColor": "#000",
"borderWidth": 0,
"borderType": "solid",
"normal": {
"label": {}
}
},
"data": [
{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
]
},
"yAxisIndex": 10
}
];
let rangeWaterQualityListOption = {
// 布局方式
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['line', 'bar']
},
saveAsImage: {
pixelRatio: 2
}
}
},
// 整体图表
grid: {
top:'80px',
// x: 80,
// y: 60,
// x: xOffset + "%",// x 偏移量
// y: "50px", // y 偏移量
// width: width + "%", // 宽度
// height: "67%"// 高度
},
// x 轴
xAxis: {
type: 'category',
// x 轴数据
data: timeArr,
axisLine: {
lineStyle: {
color: "green"
}
}
},
// 提示框（重要）
tooltip: {
// 触发类型 轴对称
trigger: 'axis',
// params 包含每个图表的信息
formatter: function (params, ticket, callback) {
var str = "";
str += params[0].marker + "监测时间" + "：" + params[0].name + "</br>";
for (var i = 0; i < params.length; i++) {
var val = params[i].data;
if (params[i].data == null) {
continue;
}
var dw = "mg/L";
if (params[i].seriesName == "水质") {
var liebie = ["", "I类", "II类", "III类", "IV类", "V类", "劣V类"];
str += params[i].marker + params[i].seriesName + "：" + liebie[val] + "</br>";
} else if (params[i].seriesName == "PH值（无量纲）") {
dw = "无量纲";
str += params[i].marker + params[i].seriesName + "：" + val + "[" + dw + "]</br>";
} else {
str += params[i].marker + params[i].seriesName + "：" + val + "[" + dw + "]</br>";
}
}
// 返回提示信息
return str;
}
},
color: ['#8B668B', '#659ab0', '#28FF28', '#EEAD0E', "#1d4bfe", "#08cbff", "#2ad795", "#edc504", "#fb8f3c", "#f96464"],
// 最上方图例
legend: [{
type: 'scroll',
// 图例宽高
itemHeight: 18,
itemWidth: 30,
// 图例名字 需要与series系列name 一一对应图例才会显示成功
data: checkInfo.showName,
x: "center",
y: "top",
textStyle: {
color: "gray",
fontSize: 12
},
// 设置选中那些折线
selected: {
'水质': false,
// 选中'系列1'
'PH值（无量纲）': true,
// 选中'系列2'
'溶解氧(mg/L)': true,
'高猛酸盐指数(mg/L)': true,
'氨氮(mg/L)': true,
'总磷(mg/L)': true,
'水温(℃)': false,
'电导率(μS/cm)': false,
'浊度(NTU)': false,
'总氮(mg/L)': false,
'化学需氧量(mg/L)': false
}
}],
yAxis: myYAxis,
series: mySeries
};
myChart.setOption(rangeWaterQualityListOption, true);
},
}
}
</script>
3929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
