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

最新推荐文章于 2024-05-18 21:57:13 发布

黄哇塞耶

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量3.1k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/simpleMan8023/article/details/126974667

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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()
      }