美文网首页
1. 替换legend图标

1. 替换legend图标

作者: yaoyao妖妖 | 来源:发表于2022-07-09 09:46 被阅读0次

    // 初始化近7日泊位使用趋势折线图
    initLineChart(lineData) {
      if (!this.lineChart) {
        this.lineChart = echarts.init(document.getElementById('lineChart'));
      }

      const option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        textStyle: {
          fontFamily: 'DINMittelschrift-Alternate'
        },
        grid: {
          top: '60',
          left: '14',
          right: '20',
          bottom: '14',
          containLabel: true
        },
        legend: {
          selected:{  
            '利用率':true,  
            '周转率':true  
          }, 
          right: '10',
          top: '8',
          itemWidth: 13,
          itemHeight: 13,
          itemGap: 10,
          textStyle: {
            color: LineColor,
            fontSize: 12
          },
          data: [{ name: '利用率',icon: 'image://'+ baseUrl + 'static/images/analy/analy-yellow.png' },
                 { name: '周转率',icon: 'image://'+ baseUrl + 'static/images/analy/analy-lig-green.png'}]
        },
        xAxis: [
          {
            type: 'category',
            axisLine: { show: false },
            splitArea: { show: false },
            axisLabel: {
              color: LineColor
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: LineColor, // 坐标轴的颜色
              },
            },
            axisTick: { show: false },
            splitLine: { show: false },
            boundaryGap: false,
            data: lineData.date
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: {
                color: LineColor, // 坐标轴的颜色
              },
            },
            splitLine: {
              // 分割线配置
              show: true,
              lineStyle: {
                color: LineDivisionColor,
              },
            },
          }
        ],
        series: [
          {
            name: '利用率',
            type: 'line',
            showSymbol: false,
            showAllSymbol: false,
            lineStyle: {
              normal: {
                color: Color[0]
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: AreaColor[0]
                    },
                    {
                      offset: 1,
                      color: 'rgba(3, 216, 162, 0)'
                    }
                  ],
                  false
                )
              }
            },
            data: lineData.useRatio
          },
          {
            name: '周转率',
            type: 'line',
            showSymbol: false,
            showAllSymbol: true,
            lineStyle: {
              normal: {
                color: Color[1]
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: AreaColor[1]
                    },
                    {
                      offset: 1,
                      color: 'RGBA(0, 149, 255, 0)'
                    }
                  ],
                  false
                )
              }
            },
            data: lineData.velocityRatio
          }
        ],
        color: Color
      };
      this.lineChart.setOption(option);
      let that = this;
      this.lineChart.on('legendselectchanged',function(params){
        debugger
          let selected=params.selected;
          let setiesName=params.name;
          switch(setiesName){
            case '利用率' :
              if(selected['利用率']){
                option.legend.data[0].icon='image://'+ baseUrl + 'static/images/analy/analy-yellow.png';
                option.legend.selected['利用率']=true;
              }else{
                option.legend.data[0].icon='image://'+ baseUrl + 'static/images/analy/analy-no.png';
                option.legend.selected['利用率']=false;
              }
              break;
            case '周转率':
            if(selected['周转率']){
            option.legend.data[1].icon='image://'+ baseUrl + 'static/images/analy/analy-lig-green.png';
            option.legend.selected['周转率']=true;
          }else{
            option.legend.data[1].icon='image://'+ baseUrl + 'static/images/analy/analy-no.png';
            option.legend.selected['周转率']=false;
          }
            break;  
          }
          that.lineChart.setOption(option);
      })
    },

相关文章

网友评论

      本文标题:1. 替换legend图标

      本文链接:https://www.haomeiwen.com/subject/twvbbrtx.html