首页 > 其他分享 >echarts柱形图给X轴坐标类目添加点击事件

echarts柱形图给X轴坐标类目添加点击事件

时间:2023-12-19 14:35:30浏览次数:30  
标签:... 柱形图 类目 点击 params true echarts

在项目中遇到这么个需求要在柱形图上的x轴添加点击事件,当点击对应x轴文字的时候要弹出模态框展示子图表

  1. 根据echarts的Api给图表实例绑定点击事件
myChartInstance?.on('click', 'xAxis.category', (params) => {
        if (params.value === '其他变动成本') {
          setIsShowOther(true); // 当点击的x轴上【其他变动成本】文字时弹出的模态框
          setIsShowFixed(false); // 仅为避免不可预期的错误,并无实际作用
        } else if (params.value === '固定费用') {
          setIsShowFixed(true); // 当点击的x轴上固【定费用文字时弹】出的模态框
          setIsShowOther(false);
        }
      });
  1. 添加了点击事件后点击x轴文字,其实没有任何反应,因为并没有给实例绑定上这个点击事件,因此还需要在options中做配置
option = {
	...其他配置,
	xAxis: [
		...其他配置
      {
	  	...其他配置
        triggerEvent: true, // 只有加上这个,才能绑定上
	 },
	 ]
}

image
成功弹出

标签:...,柱形图,类目,点击,params,true,echarts
From: https://www.cnblogs.com/ljh330/p/17913666.html

相关文章

  • v-echarts 使用折线图
    <ve-linestyle="top:-40px"height="100%"width="100%":loading="yearChartLoading":data="yearChartData":extend="chartExtend":legend-visible="false":settings="yearSetting......
  • echarts设置多条折线不是你想的那样简单
    简单的多条折线图小伙伴写过多条折线图的都知道,常见的折线图是xAxis配置项下的data属性上设置时间或者日期。series配置项下是对应的legend中的数据以及该条折线的数据。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"con......
  • vue中echarts图表---正负轴柱状图
    一、安装npmiecharts--save二、引入//全局引入importechartsfrom'echarts'Vue.prototype.$echarts=echarts//局部【这里使用局部引入】importechartsfrom'echarts';三、代码1<!--容器-->2<divid="cylinderEcharts"ref="cyl......
  • 记录--Echarts绘制气泡图
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助Echarts绘制气泡图气泡图是一种用于可视化三维数据的图表类型,其中两个变量用于确定数据点在平面上的位置,另一个变量用于确定气泡的大小。Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,包括灵......
  • echarts 图
    ECHARTS官网:Examples-ApacheECharts各图图标可以参考:iconfont-阿里巴巴矢量图标库ECHARTS官网找想要的图,然后打开:右边是可视化的图形显示,左边是:代码编辑:只有内含的属性配置,可以在里面编写属性,然后即刻运行在右侧显示完整代码:显示右侧图形的整个vue代码,拿来......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程(一)
    前言在很多时候,枯燥的数字并不能很直观的展示地域的差别,比如一个企业,想要分析产品在国内的销售情况,报表可能并不能最直接的展示差异,而一个结合地图的展示,就会直观得多,更便于大家去看到差距,更利于决策。当然,除了做商业决策,将数据与地图结合,也更便于我们展示诸如人口密度,经济总量等数......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程(二)
    前言上一篇文章,我们介绍了如何使用pyecharts展示带地图的数据分析结果,并且实际绘制了省份图和全国城市图,用于展示数据。本文我们继续来使用pyecharts绘制以地图为基础的图像。绘制分段图但是我们在绘制全国的图形时,没有考虑考虑到将不同级别的数据进行分层,比如每一段的颜色不一......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程(三)
    前言前面两篇文章,我们主要介绍了绘制基本的地图以及数据展示图,其实我们可以在地图上绘制更多类型的图形,本文就来继续介绍在地图的基础上进行我们的数据可视化工作。绘制轨迹图每年春运,都是大部分的人从北上广深等发达地区回到广大的中西部地区,春节之后,再从广大的中西部地区回到......
  • 软件测试/人工智能|Python数据可视化神器pyecharts教程(一)
    前言在很多时候,枯燥的数字并不能很直观的展示地域的差别,比如一个企业,想要分析产品在国内的销售情况,报表可能并不能最直接的展示差异,而一个结合地图的展示,就会直观得多,更便于大家去看到差距,更利于决策。当然,除了做商业决策,将数据与地图结合,也更便于我们展示诸如人口密度,经济总量......
  • echarts 绘图 的 代码片段
    软件版本:eCharts5.4.3vue.js3.2.36ElementPlus2.3.12-- 序章官网:https://echarts.apache.org/zh/index.html快速上手:https://echarts.apache.org/handbook/zh/get-started/下载方式1:jsDelivrCDNhttps://www.jsdelivr.com/package/npm/echarts<scriptsrc="https:/......