echarts——图例+自定义tooltip——tooltip前面的小点根据柱状图颜色来自动渲染

//柱状图+折线图
    GradientColumn(id, xaxisData, yaxisData, flash = false) {
      var myChart = echarts.init(document.getElementById(id));
      myChart.clear();
      let option = {
        legend: {
          x2: '20px',
          y: '0',
          itemWidth: 18,
          itemHeight: 10,
          icon: 'rect',
          textStyle: {
            //图例文字的样式
            color: '#000',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: 'rgba(255,255,255,0.8)',
          extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
          textStyle: {
            fontSize: 14,
            color: '#000',
            align: 'left',
          },
          formatter: (params) => {
            var html = params[0].axisValue + '<br>';
            params.forEach((item, index) => {
              html +=
                item.marker +
                '' +
                item.seriesName +
                '：' +
                item.value +
                (item.seriesName && item.seriesName.indexOf('利用率') > -1
                  ? '%'
                  : '') +
                '<br>';
            });
            return html;
          },
        },
        color: ['#FFB74A', '#F17B2C', '#fc8452', '#9a60b4', '#ea7ccc'],
        grid: {
          x: 30,
          y: 50,
          x2: 40,
          y2: 30,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#000',
              fontSize: 14,
            },
            axisLine: {
              lineStyle: {
                color: '#efefef',
                width: 1,
              },
            },

            axisTick: {
              show: false,
            },
            data: xaxisData,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#efefef',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#efefef',
              },
            },
            axisLabel: {
              show: true,
              color: '#000',
              fontSize: 14,
            },
          },
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: '{value} %',
              color: '#000',
              fontSize: 14,
            },
          },
        ],
        series: yaxisData,
      };
      myChart.setOption(option);
      if (flash) this.lunboEcharts(myChart, xaxisData.length);
    },
    //轮播tootip
    lunboEcharts(echartsId, dataLen, currentIndex = -1) {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        echartsId.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        echartsId.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        echartsId.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 3000);
    },