echarts中如何实现legend某个值默认灰色不显示数据？

最新推荐文章于 2025-03-31 16:57:18 发布

原创最新推荐文章于 2025-03-31 16:57:18 发布 · 4.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在ECharts中通过两种方法实现图例默认不显示的效果。第一种方法是直接在legend配置项中使用selected属性来指定哪些图例默认为不显示状态；第二种方法则是通过methods中的函数动态设置selected属性，实现更灵活的图例显示控制。

echarts中实现如下图legend某个值默认不显示
在这里插入图片描述

第一种方法 legend的selected

    legend: {
                data: ['支付金额（元）', '结算金额（元）','支付人数','店铺访客数'],
                icon: "circle",
                right:35,
                itemWidth: 10,  // 设置宽度
                itemHeight: 10, // 设置高度
                textStyle: {  // 图例文字的样式
                  fontSize: 12
                },
                selected:{
                   '支付金额（元）':true,
                    '结算金额（元）':true,
                    '支付人数':false,
                    '店铺访客数':false
                 }
              },

第二种方法（完整版）

methods：{
   //设置折线图
   getTransactionLine(){
      
          let legend=['支付金额（元）', '结算金额（元）','支付人数','店铺访客数']
          let selectedLegend={}
          //2.1这种写法
          for(let i in legend){
            if(legend[i].indexOf('结算金额（元）')==-1&&legend[i].indexOf('支付金额（元）')==-1){
              selectedLegend[legend[i]]=false
            }
          }
          //2.2或者这种写法 除了结算金额元不显示 其他都显示
           for(let i in legend){
            if(legend[i].indexOf('结算金额（元）')>-1){
              selectedLegend[legend[i]]=false
            }
          }
          var option = {
  
            legend: {
              data: legend,
              selected:selectedLegend,
              icon: "circle",
              left:'center',
              itemWidth: 10,  // 设置宽度
              itemHeight: 10, // 设置高度
              textStyle: {  // 图例文字的样式
                fontSize: 12

              },
            },
            xAxis: {},
            yAxis: { },
            series: [],
         }

          return option
        },
        //初始化折线图
        initTransactionLine(){
          var lineChart =this.$echarts.init(this.$refs.transactionLine, null, {devicePixelRatio: 2.5});
          var option = this.getTransactionLine()
          lineChart.setOption(option)
        }
        }
 mounted(){
         this.initTransactionLine()
      }