echarts折线图点击事件vue

要实现echarts折线图的点击事件，你可以在Vue组件中使用echarts提供的API来绑定点击事件。首先，在引入echarts库的地方添加以下代码：

然后，在Vue组件的模板中，添加一个具备大小的容器dom用于渲染echarts图表：

<template>
<div id="app">
<!-- 为echarts准备一个具备大小的容器dom -->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>

接下来，继续在Vue组件的script标签中编写代码，定义一个方法来绘制折线图，并在该方法中使用echarts的setOption方法来设置相关配置项，包括tooltip、legend、xAxis、yAxis等：

<script>
import echarts from "echarts";

export default {
name: "",
data() {
return {
charts: "",
opinionData: ["3", "2", "4", "4", "5"],
};
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "axis",
},
legend: {
data: ["近七日收益"],
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["1", "2", "3", "4", "5"],
},
yAxis: {
type: "value",
},
series: [
{
name: "近七日收益",
type: "line",
stack: "总量",
data: this.opinionData,
},
],
});

// 添加点击事件
this.charts.on("click", (params) => {
// 在这里处理点击事件的逻辑
console.log(params); // 示例中使用console.log输出点击事件的参数
});
},
},
mounted() {
this.$nextTick(function () {
this.drawLine("main");
});
},
};
</script>

在上述代码中，我们通过调用echarts的on方法来绑定点击事件，其中params为点击事件的参数对象，你可以根据需要在点击事件的回调函数中处理相关逻辑。这里的示例代码中使用console.log输出点击事件的参数。最后，通过调用drawLine方法在组件挂载完成后绘制折线图。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>