ECharts 是一个基于 JavaScript 的开源可视化库,用于创建各种交互式图表和地图。ECharts 支持多种交互方式,包括点击事件和高亮事件。
点击事件可以在用户单击图表中的元素时触发,例如单击某个数据点或者某个 Legend 图例项时。下面是一个使用 ECharts 点击事件的示例代码:
myChart.on('click', function (params) {
console.log(params);
});
上面的代码中,myChart
是 ECharts 实例的名称,on
方法是 ECharts 提供的绑定事件的方法。当用户单击图表中的元素时,该方法会自动触发回调函数,并传递一个参数 params
,该参数包含了用户点击的元素的相关信息,例如数据值、坐标等。
高亮事件则可以在用户将鼠标悬停在图表中的元素上时触发,例如将鼠标悬停在某个数据点或者某个 Legend 图例项上时。下面是一个使用 ECharts 高亮事件的示例代码:
myChart.on('mouseover', 'series', function (params) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
});
});
上面的代码中,使用 dispatchAction
方法来触发高亮操作,使得用户悬停的元素被高亮显示。
需求:点击饼图,点击的部分高亮(最多只会有一块区域是处于高亮状态)。并将数据传递到下拉框。点击选中下拉框某个值,并将数据传递给饼图。实现数据的上钻和下钻。
代码实现(部分代码):
1.点击饼图
this.myChart.off("click"); //点击前先取消之前的点击事件
// echarts中this指向的问题
// echarts点击事件里的this指向的是echarts,但我们需要的是vue实例里的数据,因此不改变this指向是取不到值的
let that = this;
that.myChart.on("click", function (params) {
console.log(params.dataIndex, "pppppppp");
// 数据下钻
that.value1 = params.dataIndex;
// 需求:饼图只能有一块是高亮的,点击前找到一个高亮的就把他还原
let _index = that.list.findIndex((item) => {
return item.hightLight === true;
});
if (_index > -1) {
that.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: _index,
});
}
that.list.forEach((item, index) => {
if (item.id === params.dataIndex) {
if (item.hightLight === true) {
(item.hightLight = false),
that.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
} else {
(item.hightLight = true),
that.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
}
} else {
item.hightLight = false;
}
});
});
2.点击选择器
this.list.forEach((item, index) => {
let _index = this.list.findIndex((item) => {
return item.hightLight === true;
});
if (_index > -1) {
this.list[_index].hightLight = false;
this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: _index,
});
}
if (item.hightLight === false) {
this.list[this.value1].hightLight = true;
this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: this.value1,
});
}
});
需要注意的点: echarts中this指向的问题
在 ECharts 中,this
的指向会根据不同的上下文发生变化。在事件处理函数中,this
会指向当前被触发事件的组件实例。而在一般的 JavaScript 代码中,this
则指向调用当前函数的对象。
解决的方法:
方法一:如果需要在事件处理函数中使用外部的变量或方法,可以使用闭包或者使用 ES6 的箭头函数来解决上下文问题。箭头函数没有自己的 this
,所以在箭头函数中使用 this
时,其指向与外层作用域相同。
方法二:如果使用普通函数,则需要在事件处理函数内部保存外部的 this。如上图
最终的效果
饼图点击联动