function echarts_6() {
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('echart6'));
const data = Chart6_Data;
var series = [];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
data.forEach((m) => {
series.push({
name: m.name,
type: 'scatter',
itemStyle: itemStyle,
data: m.value
}
)
});
const schema = [
{name: 'date', index: 0, text: '日'},
{name: 'AQIindex', index: 1, text: 'AQI指数'},
{name: 'AQIText', index: 2, text: '污染程度'},
];
option = {
color: ['#dd4444', '#fec42c', '#80F1BE'],
legend: {
top: 10,
data: ['北京', '上海', '广州'],
textStyle: {
fontSize: 16,
color: '#fff' // 设置图例文字颜色为白色
}
},
grid: {
left: '10%',
right: 150,
top: '18%',
bottom: '10%'
},
tooltip: {
backgroundColor: 'rgba(255,255,255,0.7)',
formatter: function (param) {
var value = param.value;
// prettier-ignore
return '
'
+ param.seriesName
+ '
'
+ schema[1].text + ':' + value[1] + '
'
+ schema[2].text + ':' + value[2] + '
';
}
},
xAxis: {
type: 'value',
name: '日期',
nameGap: 16,
nameTextStyle: {
fontSize: 16
},
max: 31,
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
fontSize: 16
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '12',
}
}
},
visualMap: [
{
left: 'right',
top: '10%',
dimension: 1,
min: 0,
max: 250,
itemWidth: 30,
itemHeight: 120,
calculable: true,
precision: 0.1,
text: ['圆形大小:AQI指数'],
textGap: 30,
inRange: {
symbolSize: [10, 70]
},
outOfRange: {
symbolSize: [10, 70],
color: ['rgba(255,255,255,0.4)']
},
controller: {
inRange: {
color: ['#c23531']
},
outOfRange: {
color: ['#999']
}
},
textStyle: { // 设置图例文字的样式
color: '#fff' // 设置图例文字颜色为白色
},
}
],
series: series,
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}