首页 > 其他分享 >echarts饼状图点击选择功能

echarts饼状图点击选择功能

时间:2024-02-02 09:35:59浏览次数:31  
标签:chartIndex mychart param 点击 dataIndex echarts 状图

我们在使用echarts的时候,不免会遇到点击饼状图进而让其他地方数据发生变化的功能,这时候我们就需要将当前点击的饼状图区域放大显示(选中状态)。

1.vue

<div ref="csRef"></div>

2.方法

const csRef = ref()
let mychart=""
const chartIndex = ref()
//渲染
const renderFun = ()=>{
      if (mychart!= '') {
        mychart.dispose() //销毁
      }
      let option={}
       mychart= echarts.init(csRef.value)
       option && mychart.setOption(option)
       //点击事件
      mychart.on('click', function (param) {
        //点击选中
        if (param.dataIndex != chartIndex.value) {
          myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: chartIndex.value,
        });
    }
    chartIndex.value = param.dataIndex;
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: param.dataIndex,
    });
      })
}        

3.效果展示

 黄色区域点击放大了。

标签:chartIndex,mychart,param,点击,dataIndex,echarts,状图
From: https://www.cnblogs.com/lisir-blogshare/p/18002553

相关文章

  • 饼状图点击图例更新数据
    myChart.on('legendselectchanged',function(params){//监控图例变化console.log(edata);//edata即data数据varsum2=0;for(vari=0;i<edata.length;i++){if(params.selected[edata[i].name]==false){}else{ sum2+=edata[i].value } } optio......
  • 等保2.0云安全体系,点击查看
    云安全服务平台(等保2.0)创新基于智能编排创建安全服务链南北向安全-基于VPC重构安全区域边界东西向安全-基于微隑离重构安全区域边界东西向安全隔离,就是各虚拟机之间的隔离。简写词解释IaaS基础设施即服务这个模型提供了基础设施,如服务器、存储、网络等。用户可以在这个基础设施上......
  • Qt QPushButton 点击信号分析
    QPushButton有三个很重要的信号跟点击有关pressedclickedtoggled表面上看,pressed和clicked都会在点击按钮时触发,它们有什么区别呢?toggled好像有时候触发,有时候不触发,到底怎么回事呢?下面就一起聊一下这三个信号首先,这三个信号都是从QAbstractButton继承来的,也就是说,下面情......
  • Windows URL Scheme 命令行唤起软件指定界面 网页链接点击出现发邮件客户端
    前言全局说明Windows命令行唤起软件指定界面网页链接点击出现发邮件客户端网页链接里发邮件,点击后弹出系统邮件客户端,这是Win提供的一种叫URLScheme一、直接向某人发送邮件mailto:[email protected].在网页里调用,写成<ahref="mailto:[email protected]">发邮件给管理......
  • 点击修改某一行数据,打开弹窗,是从点击行上带出修改对象的数据进行回显,还是根据id从后端
    在前端开发中,点击修改某一行数据并打开弹窗进行回显时,常见的做法有两种:从点击行上带出修改对象的数据进行回显:如果列表渲染时,每一行的数据对象已经完整地加载到前端(例如通过一次性获取所有列表数据或者分页加载时将当前页面数据加载至前端),那么可以直接根据用户点击的行数据更......
  • 前端开发时,点击重置按钮,列表会回到第一页查询呢,还是查询当前页,只是把输入框的条件清空
    点击重置按钮时,列表的行为取决于具体的应用需求和设计。通常有以下两种常见情况:回到第一页并清空查询条件:当用户点击重置按钮后,应用会清除所有输入框中的查询条件,并将列表刷新回第一页的数据(通常是默认排序或无条件查询的结果)。这种设计在用户想要从头开始检索数据或者需要查看......
  • 可滚动的塔状图,包含单个或者多个,颜色可变或者一致,或者渐变,详见代码:
    相关组件代码:<template><!--柱状图横向滚动柱状图--><div:id="histogramId"v-bind:style="{height:height,width:width}"></div></template><scripttype="text/ecmascript-6">exportdefault{p......
  • echarts之带图片的饼图
    相关代码:/**@Author:wxl*@Date:2022-11-0408:22:23*@LastModifiedby:wxl*@LastModifiedtime:2022-12-1217:32:58*/<template><!--饼图--><div:id="histogramId"v-bind:style="{height:height,width:width}&quo......
  • 『Echarts』简介
    目录一、前言二、『Echarts』简介1.什么是『Echarts』三、数据可视化四、『Echarts』1.『Echarts』的作用2.『Echarts』能绘制哪些图表3.『Echarts』显示图表的原理五、总结一、前言本篇文章是『Echarts』系列文章的第1篇,主要介绍『Echarts』简介经过前面文章的介绍,大......
  • JavaScript 实现点击爱心效果
    可放在网页任何位置,以下是代码:<script>(function(e,t){functionr(){s=s.filter((e)=>{e.alpha<=0?(t.body.removeChild(e.el),e=null):(e.y--,e.scale+=.004,e.alpha-=.013,e.el.style.cssText=`left:${e.x}px;top:${e.y}px;opac......