130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
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 '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||
+ param.seriesName
|
||
+ '</div>'
|
||
+ schema[1].text + '：' + value[1] + '<br>'
|
||
+ schema[2].text + '：' + value[2] + '<br>';
|
||
}
|
||
},
|
||
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();
|
||
});
|
||
} |