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 = `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>`;
value = item.value && item.value !== '--' ? `${item.value} ${item.data.factorUnit}` : item.value;
str += `
<div style='width:100%;height:28px;display:flex;align-items:center;justify-content:space-between;'>
<span>${marker} ${item.seriesName}：${value}</span>
<span>${item.data.isValid ? '有效' : '无效'}</span>
</div>`;
});
return `<div style='width:240px;padding:8px 16px;'>${params[0].axisValue}</br>${str}</div>`;
},
},
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';
},
},
],
};