115 lines
2.9 KiB
JavaScript
115 lines
2.9 KiB
JavaScript
function echarts_2() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echart2'));
|
||
|
||
var xData = Chart2_Data.x;
|
||
var yData1 = Chart2_Data.y1;
|
||
var yData2 = Chart2_Data.y2;
|
||
var yData3 = Chart2_Data.y3;
|
||
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
// title: {
|
||
// text: '2023年重庆市气温分布图',
|
||
// subtext: '数据来源: 气象局'
|
||
// },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
var content = '';
|
||
params.forEach(function (item) {
|
||
content += item.seriesName + ' : ' + item.value + '°C<br>';
|
||
});
|
||
return content;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['最高气温', '最低气温', '平均气温'],
|
||
textStyle: { // 设置图例文字的样式
|
||
color: '#fff' // 设置图例文字颜色为白色
|
||
}
|
||
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
// boundaryGap: false,
|
||
data: xData,
|
||
axisLabel: {
|
||
interval: 0,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: '12',
|
||
},
|
||
}
|
||
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
|
||
axisLabel: {
|
||
interval: 0,
|
||
// rotate:50,
|
||
show: true,
|
||
splitNumber: 15,
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: '12',
|
||
},
|
||
}
|
||
|
||
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
start: 0,
|
||
end: 100
|
||
},
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '最高气温',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: yData1,
|
||
},
|
||
{
|
||
name: '最低气温',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: yData2,
|
||
},
|
||
{
|
||
name: '平均气温',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: yData3,
|
||
}
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
} |