代码触发 ECharts 中组件的行为
有时候需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。
在 ECharts 通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，
也可以方便地根据需要去记录用户的行为路径。
常用的动作和动作对应参数:
action.legend. legendSelect
Action 选中图例。
dispatchAction({ type: 'legendSelect', // 图例名称
name: string})
EVENT: legendselected
action.legend. legendUnSelect
Action 取消选中图例。
dispatchAction({ type: 'legendUnSelect', // 图例名称
name: string})
EVENT: legendunselected
action.legend. legendToggleSelect
Action切换图例的选中状态。
dispatchAction({ type: 'legendToggleSelect', // 图例名称
name: string})
EVENT: legendselectchanged
action.legend. legendAllSelect
Action 将图例全选。
dispatchAction({ type: 'legendAllSelect'})
EVENT: legendselectall
action.legend. legendInverseSelect
Action 将图例反选。
dispatchAction({ type: 'legendInverseSelect'})
EVENT: legendinverseselect
action.legend. legendScroll
Action 控制图例的滚动。当 legend.type 为 'scroll' 时有效。
dispatchAction({ type: 'legendScroll',
scrollDataIndex: number,
legendId: string})
EVENT: legendscroll<template>
<div>
<div class="ScatterChart" :id="myCharts"></div>
</div>
</template>
<script>
export default {
name: "ScatterChart",
props: {
classDate: {
type: Array,
default: () => [],
},
legendData: {
type: Array,
default: () => [],
},
},
data() {
return {
myChart: null,
};
},
mounted() {
this.drawEcharts();
},
computed: {
myCharts() {
return "myCharts" + Math.random() * 100000;
},
},
methods: {
sel(name) {
if (!!name) {
this.myChart.dispatchAction({
type: "legendInverseSelect",
});
// 单独调用时，注意当前是否已经被选中，否则会看不到效果以为无效
this.myChart.dispatchAction({
type: "legendSelect",
name: name,
});
}else{
this.myChart.dispatchAction({
type: "legendAllSelect",
});
}
},
drawEcharts() {
this.myChart = this.$echarts.init(document.getElementById(this.myCharts));
var option;
option = {
xAxis: {
type: "value",
name: "题目", // x轴的名字，可以理解成单位
nameTextStyle: {
// x轴的名字的样式相关
color: "#BFBFBF",
nameLocation: "start",
},
splitLine: {
//去除网格线
show: false,
},
splitArea: { show: false }, //去除网格区域，否则会有一片区域
axisLabel: {
// 设置x轴的文字的样式
textStyle: {
show: true,
color: "#BDBDBD",
fontSize: "12",
},
},
axisLine: {
show: true, // 把x轴从实线变成虚线
lineStyle: {
// 设置x轴线条样式的颜色
color: "#BDBDBD",
width: 1,
type: "solid",
},
},
scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了
},
yAxis: {
type: "value",
// name: "y轴的单位（人数）",
nameTextStyle: {
color: "#BFBFBF",
nameLocation: "end",
},
axisTick: {
show: false, // 去掉y轴的凸出刻度
},
axisLine: {
show: false, // 把y轴从实线变成虚线
},
splitLine: {
//去除网格线
show: true,
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
},
},
splitArea: { show: false }, //去除网格区域
axisLabel: {
// 设置y轴的文字的样式
textStyle: {
show: true,
color: "#BDBDBD",
fontSize: "12",
},
},
scale: true, // 设置数据自动缩放，要不然数据就堆一块了
// show: false,
},
grid: {
// 位置
show: true,
x: 36,
y: 40,
x2: 72,
y2: 36,
borderWidth: 0, // 去除图表的边框
},
tooltip: {
formatter: function (obj) {
let value = obj.value;
return (
'<div style="border-bottom: 1px solid #baf; font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">' +
obj.seriesName +
"</div>" +
"分数" +
"：" +
Number(value[1]).toFixed(2) +
"分" +
"<br>"
);
},
},
series: this.classDate,
title: {
// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
subtext: "分数",
left: 0, // 距离左边位置
top: -8, // 距离上面位置
subtextStyle: {
// 设置二级标题的样式
color: "#BFBFBF",
},
},
color: ["#4CD3D4", "#409EFF", "#facb31"], // 控制圆环图的颜色
legend: {
left: 100,
itemGap: 20,
itemWidth: 8,
itemHeight: 8,
data: this.legendData,
selectedMode: false,// 关闭图例的点击事件
textStyle: {
fontSize: 12,
},
},
};
option && this.myChart.setOption(option);
this.myChart.on("legendselectchanged", (e) => {
console.log("e====>", e);
});
// 自适应
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.ScatterChart {
height: 100%;
width: 100%;
min-width: 200px;
min-height: 200px;
}
</style>