5***@qq.com
5***@qq.com
  • 发布:2019-04-24 11:14
  • 更新:2019-04-24 15:51
  • 阅读:4923

【已解决】官方hello-uniapp项目中的echarts示例,是否支持点击事件。

分类:uni-app

如题,如何做点击事件。

2019-04-24 11:14 负责人:无 分享
已邀请:
ZGH0709

ZGH0709

支持,通过 echarts 实例进行注册即可。

pieChart.on('click', function(params){  
    // do something  
});
  • 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

5***@qq.com

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>  

  • ZGH0709

    return pieChart


    2019-04-24 15:35

  • 5***@qq.com (作者)

    回复 ZGH0709: 还是一样,点击没效果。无法console,如下楼


    2019-04-24 15:51

5***@qq.com

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;  
				  
			}
  • ZGH0709

    发个 demo ?


    2019-04-24 16:19

  • 5***@qq.com (作者)

    回复 ZGH0709: demo地址: https://gitee.com/abner2019/echart_demo.git


    2019-04-24 16:40

  • 5***@qq.com (作者)

    回复 ZGH0709: 这个问题有着落么,我已经快放弃了。。。


    2019-04-24 17:10

  • ZGH0709

    回复 5***@qq.com: 删除这句话: silent: true,


    2019-04-24 17:54

  • 5***@qq.com (作者)

    回复 ZGH0709: 谢谢,谢谢,真不清楚原来是这里出了错。。。。。谢谢,感谢你。


    2019-04-24 18:00

  • ZGH0709

    回复 5***@qq.com: 不客气~


    2019-04-24 18:33

该问题目前已经被锁定, 无法添加新回复