option = { color: [ '#5580FF', '#4BB2FF', '#33CC9C', '#FFA646', '#FF6868', '#FFC633', '#9162E4', '#C158DC', '#67C23A', '#FF5C8D', ], legend: { type: 'scroll', bottom: 10, icon: 'rect', itemWidth: 24, itemHeight: 2, data: ['无效', '有效', 'CO', 'NO₂', 'O₃', 'PM10', 'PM2.5', 'SO₂', '风速', '风向', '降水量（雨量）', '气压'], }, grid: { top: '12%', left: '2%', right: '2%', bottom: '11%', containLabel: true, }, brush: { xAxisIndex: 'all', brushLink: 'all', outOfBrush: { colorAlpha: 0.1, }, }, toolbox: { show: true, top: 4, right: 16, itemSize: 20, feature: { dataZoom: { yAxisIndex: 'none', title: { zoom: '区域放大', back: '区域还原' }, }, brush: { type: ['lineX', 'clear'], title: {lineX: '框选区域',clear: '清除框选' } }, saveAsImage: { title: '保存图片', }, }, }, tooltip: { trigger: 'axis', confine: true, formatter: (params) => { // console.log("tooltip样式", params) let str = '', value = '', marker = ''; params.forEach((item) => { marker = ``; value = item.value && item.value !== '--' ? `${item.value} ${item.data.factorUnit}` : item.value; str += `

${marker} ${item.seriesName}：${value} ${item.data.isValid ? '有效' : '无效'}

`; }); return `

${params[0].axisValue}
${str}

`; }, }, xAxis: { name: '', type: 'category', axisTick: 'none', axisLine: { show: false, }, splitLine: 'none', data: [ '2021-08-19 01', '2021-08-19 02', '2021-08-19 03', '2021-08-19 04', '2021-08-19 05', '2021-08-19 06', '2021-08-19 07', '2021-08-19 08', '2021-08-19 09', '2021-08-19 10', '2021-08-19 11', '2021-08-19 12', '2021-08-19 13', '2021-08-19 14', '2021-08-19 15', '2021-08-19 16', '2021-08-19 17', '2021-08-19 18', '2021-08-19 19', '2021-08-19 20', '2021-08-19 21', '2021-08-19 22', '2021-08-19 23', '2021-08-20 00', ], }, yAxis: [ { type: 'value', name: '单位', splitNumber: 10, // minInterval: 5, axisTick: 'none', axisLine: { show: false, }, splitLine: 'none', splitArea: { show: true, width: 200, areaStyle: { color: ['#F2F6FC', 'transparent'], }, }, }, ], series: [ { name: '有效', type: 'line', data: [], }, { name: '无效', type: 'line', data: [], }, { name: 'CO', type: 'line', data: [ { value: 1.2, isValid: false, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.2, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, { value: 1.3, isValid: true, factorName: 'CO', factorUnit: 'mg/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, { name: 'NO₂', type: 'line', data: [ { value: 39, isValid: false, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 41, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 42, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 38, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 38, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 41, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 40, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 39, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 41, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 42, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 42, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 38, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, { value: 37, isValid: true, factorName: 'NO₂', factorUnit: 'ug/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, { name: 'O₃', type: 'line', data: [ { value: 176, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 183, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 176, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 168, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 169, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 181, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 176, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 187, isValid: true, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 183, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 167, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 175, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 168, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 172, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 174, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 180, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 176, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 175, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 182, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 177, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 166, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 178, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 176, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 178, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, { value: 168, isValid: false, factorName: 'O₃', factorUnit: 'ug/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, { name: 'PM10', type: 'line', data: [ { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 52, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 48, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 50, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 51, isValid: false, factorName: 'PM10', factorUnit: 'ug/m³', }, { value: 49, isValid: true, factorName: 'PM10', factorUnit: 'ug/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, { name: 'PM2.5', type: 'line', data: [ { value: 21, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 22, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 23, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 24, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 23, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 24, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 22, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 21, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 23, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 24, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 21, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 22, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 22, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 20, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 22, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 21, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 23, isValid: true, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 24, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 26, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 20, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 21, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 24, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 21, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, { value: 23, isValid: false, factorName: 'PM2.5', factorUnit: 'ug/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, { name: 'SO₂', type: 'line', data: [ { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: false, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: false, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 37, isValid: false, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: false, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: false, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 36, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 34, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, { value: 35, isValid: true, factorName: 'SO₂', factorUnit: 'ug/m³', }, ], symbolSize: 10, symbol: (value, params) => { if (params.data.isValid) return 'circle'; return 'emptyCircle'; }, }, ], };

Echarts在线免费图表