如题，如何做点击事件。
5***@qq.com
- 发布：2019-04-24 11:14
- 更新：2019-04-24 15:51
- 阅读：5423
5***@qq.com (作者)
<template>
<view>
<view class="canvasView">
<mpvue-echarts class="ec-canvas" @onInit="pieInit" canvasId="pie" ref="pieChart" />
</view>
</view>
</template>
<script>
import * as echarts from '@/components/echarts/echarts.simple.min.js';
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
let option = {
color: ['#00136c', '#f87d42', '#db3951'],
series: [{
type: "pie",
radius: ['50%', '70%'],
center: ['50%', '50%'],
silent: true,
label: {
color: '#000000'
},
labelLine: {
lineStyle: {
color: '#DCDBDB'
}
},
data: []
}]
};
export default {
data() {
return {
updateStatus: false
}
},
props: {
datas: Array
},
mounted() {
setTimeout(() => {
this.updatePie(this.datas);
}, 100)
},
methods: {
updatePie(list) {
if (this.updateStatus) {
return;
}
var yAxis = [];
list.forEach(function(element) {
yAxis.push(element);
});
option.series[0].data = yAxis;
this.$refs.pieChart.init();
this.updateStatus = true;
},
pieInit(e) {
let { width,height } = e;
let canvas = this.$refs.pieChart.canvas
echarts.setCanvasCreator(() => canvas);
let pieChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(pieChart)
pieChart.setOption(option)
this.$refs.pieChart.setChart(pieChart)
pieChart.on('click', function(params){
console.log('1')
// do something
});
}
},
components: {
mpvueEcharts,
}
}
</script>
<style>
.canvasView {
height: 240px;
}
.ec-canvas {
width: 100%;
height: 100%;
}
</style>
5***@qq.com (作者)
pieInit(e) {
let { width,height } = e;
let canvas = this.$refs.pieChart.canvas
echarts.setCanvasCreator(() => canvas);
let pieChart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(pieChart)
pieChart.setOption(option)
this.$refs.pieChart.setChart(pieChart)
pieChart.on('click', function(params){
console.log('1')
// do something
});
return pieChart;
}
5***@qq.com (作者)
~~加在init() 方法之后。但this.$refs.pieChart.on is not a function
2019-04-24 15:12
ZGH0709
回复 5***@qq.com: this.$refs.pieChart 是 Vue 实例，事件要注册在 echarts 实例上
2019-04-24 15:26
5***@qq.com (作者)
回复 ZGH0709: 我在pieInt下 用pieChart写了点击，无任何效果啊。。才写的这个。
2019-04-24 15:28
5***@qq.com (作者)
回复 ZGH0709: 在楼下有代码示例，直接引用的官网的示例
2019-04-24 15:29