vue2 调用echarts api模拟legend置灰效果（使用div自定义实现legend）

我就是我 2024-03-17 17:54 50阅读 0赞

项目需要自定义legend，仅用echarts自身配置无法实现，使用div绘制legend，再使用echarts api实现legend点击置灰效果

<div
          class="item"
          v-for="(item, index) in data"
          key="index"
          @click="dispatchEvent(item, index)">
            <div
               class="circle"
               tyle="{ backgroundColor: getColor(item) }">
            </div>
            <p>{
       { item.name }}</p>
            <div class="num">{
       { item.cent }}</div>
           </div>
      </div>

getColor用于获取数据对应的颜色块，如果禁用显示灰色  
color是项目中定义的一个长度为13的颜色数组

computed: {
        
        getColor() {
        
          return (obj) => {
        
            if (obj.disable) {
        
              return '#E0E0E0';
            }
            const index = this.data.findIndex((item) => item.name === obj.name);
            if (this.color[index]) {
        
              return this.color[index];
            } else {
        
              return this.color[index % 13];
            }
          };
        },
      },

调用echarts api，根据名称切换legend

dispatchEvent(item, index, key) {
        
          item.disable = !item.disable;
          this.$set(this.data, index, item);
          this.$refs.chart.dispatchAction({
        
            type: 'legendToggleSelect',
            name: item.name,
          });
        },

需要注意：  
option中legend属性必须要写，不然不能正常触发legendToggleSelect

legend: {
        
         show: false,
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，50人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-echarts-v3 legend的自定义

[在这里插入图片描述][20190917151526934.png] [20190917151526934.png]: https://img-blog.csdnim...

刺骨的言语ヽ痛彻心扉/ 2024年04月19日 10:55/ 0 赞/ 59 阅读

相关 echarts设置指定legend不可置灰

this.chartLine = echarts.init(this.$refs.chart) this.chartLine.on("legendsele

落日映苍穹つ/ 2024年03月23日 17:20/ 0 赞/ 81 阅读

相关 vue2 调用echarts api模拟legend置灰效果（使用div自定义实现legend）

项目需要自定义legend，仅用echarts自身配置无法实现，使用div绘制legend，再使用echarts api实现legend点击置灰效果 <div

我就是我/ 2024年03月17日 17:54/ 0 赞/ 51 阅读

相关 Echarts的legend使用介绍

当我们在实际的业务开发的时候使用这些Echarts，G2等等的库肯定不是把官网上简单的demo复制过来就能解决的了的。除非你们公司没有UI设计，页面全由前端同学自己说了算。那么

超、凢脫俗/ 2023年07月12日 06:24/ 0 赞/ 54 阅读

相关 Echarts 更改图例(legend)颜色

1 原始效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

叁歲伎倆/ 2023年01月07日 12:26/ 0 赞/ 422 阅读

相关 Echarts中legend翻页自定义箭头

官网示例中的效果是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

不念不忘少年蓝@/ 2022年09月02日 00:45/ 0 赞/ 460 阅读

相关 echarts图表legend整齐排列

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

浅浅的花香味﹌/ 2022年08月29日 10:55/ 0 赞/ 389 阅读

相关 echarts 折线图自定义颜色与修改legend颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZf

Love The Way You Lie/ 2022年03月08日 02:48/ 0 赞/ 1213 阅读

相关 echarts 自定义legend，线性渐变

先看效果图，业务要求：一次最多两个系列，去掉最开始的系列不管是用原生 jquery vue react基本思路都是：改变 series clear() 再setO

向右看齐/ 2021年09月20日 01:16/ 0 赞/ 1179 阅读

相关 echarts 同样配置图例legend

color:['颜色'], 可手动修改图例颜色可通过new this.$echarts.graphic.LinearGradient设置渐变色

桃扇骨/ 2021年07月25日 00:16/ 0 赞/ 595 阅读