axis点击事件
<template>
<div ref="chart" style="width: 800px; height: 350px"></div>
</template>
<script>
export default {
data() {
return {
chartData: [
{ name: "衬衫", value: 5 },
{ name: "羊毛衫", value: 20 },
{ name: "雪纺衫", value: 36 },
{ name: "裤子", value: 10 },
{ name: "高跟鞋", value: 10 },
{ name: "袜子", value: 20 },
],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart);
const option = {
tooltip: {
trigger: "axis",
},
grid: {
top: "20px",
left: "40x",
right: 0,
bottom: "20px",
},
xAxis: {
data: this.chartData.map((x) => x.name),
},
yAxis: {},
series: [
{
name: "销量",
type: "line",
smooth: true,
data: this.chartData.map((x) => x.value),
},
],
};
// 核心代码
chart.getZr().on("mousedown", (params) => {
const pointInPixel = [params.offsetX, params.offsetY];
if (chart.containPixel("grid", pointInPixel)) {
let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0];
this.$message.success(
"你点击区域的数据为：" + option.series[0].data[xIndex]
);
}
});
chart.setOption(option);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
显示代码 复制代码 复制代码