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

黄哇塞耶

4607人浏览 · 2022-09-21 16:14:16

黄哇塞耶 · 2022-09-21 16:14:16 发布

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