echarts的click事件

目录

前言

一、click事件


前言

在使用echarts的过程中,最常用的则是不同系列所对应的click返回参数的不同

一、click事件

在以下图中,其实是两个不同系列的数据,一个是图中的钟表,一个是下面的图

TypeScript 复制代码
                    const option = {
                        grid: {
                            left: 25,
                            top: 25,
                            right: 25,
                            bottom: 0,
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'none',
                            },
                            formatter: '{b}:{c}人',
                        },
                        xAxis: {
                            data: this.data.xAxisData,
                            axisTick: { show: false },
                            axisLine: { show: false },
                            axisLabel: {
                                interval: 0,
                                color: 'rgba(255,255,255, 0.8)',
                            },
                        },
                        yAxis: {
                            splitLine: { show: false },
                            axisTick: { show: false },
                            axisLine: { show: false },
                            axisLabel: { show: false },
                        },
                        color: ['#e54035'],
                        series: [
                            {
                                name: 'education',
                                type: 'pictorialBar',
                                barCategoryGap: '-130%',
                                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                                itemStyle: {
                                    opacity: 0.5,
                                },
                                emphasis: {
                                    //高亮
                                    itemStyle: {
                                        opacity: 1,
                                    },
                                },
                                data: this.data.list,
                                z: 10,
                            },
                            {
                                name: 'glyph',
                                type: 'pictorialBar',
                                barGap: '-100%', //让两个柱子重叠
                                symbol: 'image://../../assets/images/data-screen/time.png',
                                symbolPosition: 'end', //让图形与柱子外切
                                symbolSize: 20, //长宽都为50
                                symbolOffset: [0, '-120%'], //偏移量 x,y轴
                                data: this.data.list,
                            },
                        ],
                    };
                    this.echartsElement.setOption(option);

给系列1的z设置为10,值越大则离屏幕越近

根据点击事件的返回参数所示,当点击系列图为钟表形状时,此时seriesIndex为1

而点击下面的图形时,此时返回seriesIndex为0

此时如果想要点击seriesIndex为0触发点击时间则可以写为

TypeScript 复制代码
 this.echartsElement.on('click', (params: any) => {
                        if (params.seriesIndex == 0) {
                        }
                    });
相关推荐
qq_390161776 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543234 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test36 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome