<div ref="chartContainer" style="height: 350px"></div>
function initChart() {
let that = this;
if (
that.chartInstance != null &&
that.chartInstance != "" &&
that.chartInstance != undefined
) {
that.chartInstance.dispose();
}
const chartContainer = that.$refs.chartContainer;
that.chartInstance = echarts.init(chartContainer);
let options = {
title: {
text: "时序统计图",
},
tooltip: {
trigger: "axis",
},
legend: {
top: "6%",
selectedMode: that.queryParams.stationId ? "single" : "multiple", // 单个/多个
data: ['未来馨居',...],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "20%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: date,
axisLine: {
lineStyle: {
color: ["#ccc", "#333", "#333", "#333", "#333", "#333", "#333"],
},
},
},
yAxis: {
name: "mm",
nameTextStyle: {
padding: [0, 30, 0, 0],
},
type: "value",
},
series: [{},{},...],
};
// 绘制图表
that.chartInstance.setOption(options, true);
// 自适应窗口变化
window.addEventListener("resize", that.handleResize);
// 图例单击事件,点击时当前图例高亮,其他置灰,站点查询条件跟着变化
that.chartInstance.on("legendselectchanged", function (event) {
// console.log(event);
const legendData = event.selected; // 获取所有图例数据 {未来馨居: false, 市政府: true,...}
for (const key in legendData) {
if (key !== event.name) {
event.selected[key] = false;
} else {
event.selected[key] = true;
}
}
options.legend.selectedMode = "single";
options.legend.selected = legendData; // {未来馨居: true, 市政府: false,...}
// 更新图表配置
that.chartInstance.setOption(options, true);
});
};
效果图: