点击echarts图表title进行相关操作

奋斗吧程序媛

已于 2023-03-08 14:47:28 修改

阅读量1.9k

点赞数 2

文章标签： echarts vue.js javascript

于 2023-03-08 14:39:26 首次发布

原文链接：https://blog.csdn.net/m0_66970189/article/details/127910296

版权

在Vue的移动端项目中，通过设置Echarts的title属性triggerEvent为true，可以监听标题点击事件。然后在点击事件处理函数中，通过params.componentType判断是否点击了标题，实现点击图表标题跳转到详情页面的功能。

摘要由CSDN通过智能技术生成

最近在做移动端项目，页面中有一张echarts图表和一个列表，并且它们几乎已经占满页面，而页面还差一个功能是要跳转到另一个详情页面，想了半天没想到这个按钮做哪儿，后面后台老哥提醒我可以点击echarts的标题进行跳转。之前有做过点击echarts的数据弹出弹窗，但是怎么确定是点到标题进行操作呢？

上代码：(Vue)

  methods:{
		initChart(){
			this.chart = echarts.init(document.getElementById('chart'));
			this.chart.setOption({
				 title: {
                    text: '表格',
                    triggerEvent: true  // 点击可触发事件
                },
                xAxis: {
                    type: 'category',
                    data: this.xData  // x轴数据
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        name: '数据1',
                        data: this.series1
                    },
                    {
                        type: 'bar',
                        name: '数据2',
                        data: this.series2
                    }
                ]
			});
			this.chart.off('click');//先解绑事件，防止事件重复触发
			this.chart.on('click', params => {  // 给图表绑定点击事件
                if (params.componentType === 'title') { // 确认点击部分为title
                    console.log('点击标题')
                }
            })
		}
	}

1.核心点在于title中triggerEvent:true（允许标题触发事件）与params.componentType==='title'（判断点击部分为title）。

2.如果用params.componentType==='title'没能找到标题部分，那么可以自行打印params，确认一下title在哪儿。

————————————————
原文链接：https://blog.csdn.net/m0_66970189/article/details/127910296