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) {
                        }
                    });
相关推荐
Myli_ing6 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风8 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave15 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟17 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾39 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue