本篇讲解legend单选和动态切换X轴数据,具体见代码,并标注注释(例子 文档事例都是有的,传送门?
- 默认选中 和 不选中 传送门?
- 只能单选(目前是2个,可以是2个以上)传送门?
- legendselectchanged event事件,实时监听,动态改变X轴的数据传送门?
- this.myChart.setOption(options, true); 重新渲染canvas传送门?
<template>
<div>
<div id="main" style="width:1200px;height:600px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "echartsmorey",
data() {
return {
list: [
{
x: "01:00",
y: 1,
z: 9,
x2: "1.1"
},
{
x: "03:00",
y: 2,
z: 70,
x2: "2.1"
},
{
x: "05:00",
y: 3,
z: 1,
x2: "3.1"
},
{
x: "07:00",
y: 1,
z: 20,
x2: "4.1"
},
{
x: "09:00",
y: 0,
z: 18,
x2: "5.1"
},
{
x: "11:00",
y: 10,
z: 12,
x2: "6.1"
},
{
x: "13:00",
y: 10,
z: 12,
k: 11
},
{
x: "15:00",
y: 10,
z: 12,
x2: "7.1"
},
{
x: "17:00",
y: 10,
z: 12,
x2: "8.1"
}
],
dayX: [], // 当天的 X轴
monthX: [], // 当月的 X轴
dataY: [] // Y 轴
};
},
methods: {
init(dataX, dataY) {
this.myChart = echarts.init(document.getElementById("main"));
let option = {
legend: {
icon: "stack",
data: ["当天", "当月"],
selectedMode: "single", // 单选
selected: {
当天: true,
当月: false
}
},
tooltip: {
trigger: "none",
axisPointer: {
type: "cross"
}
},
// 工具栏
toolbox: {
x: 1100,
y: 0,
feature: {
saveAsImage: {
name: `test`
}
}
},
grid: {
left: "5%", //组件距离容器左边的距离
right: "20%",
top: "15%"
},
// X轴 滑块 可缩放
dataZoom: [
{
type: "slider",
show: true,
start: 0, // 开始百分数
end: 100 // 结束百分数
}
],
xAxis: {
type: "category",
splitLine: {
// X 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
},
data: dataX
},
yAxis: [
{
name: "Y轴单位写的位置",
type: "value",
position: "left",
splitNumber: 10, // Y 轴分隔格数
splitLine: {
// Y 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
}
}
],
series: dataY
};
this.myChart.on("legendselectchanged", obj => {
var options = this.myChart.getOption();
options.xAxis[0].data = obj.name == "当月" ? this.monthX : this.dayX;
this.myChart.setOption(options, true);
});
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
}
},
mounted() {
this.$nextTick(() => {
this.monthX = this.list.map(item => item.x2);
this.dayX = this.list.map(item => item.x);
this.dataY.push({
name: "当月",
type: "line", // 直线ss
data: this.list.map(item => item.y)
});
this.dataY.push({
name: "当天",
type: "line",
data: this.list.map(item => item.z)
});
this.init(this.dayX, this.dataY);
});
}
};
</script>
<style scoped>
</style>
补充:
当legend数据很多,想要换行,有个简单的办法,插入一条的空数据即可换行
比如: legend:[1,2,3,4,5,6,7,’’,3,4,5,6,7,8]