Echarts之柱形图--每个柱形图颜色不同且带图例

需求：

鼠标移入：

1、容器：

<div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>

2、在methods中

methods:{
	initChart() { 
      // 源数据
      let datas = [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
      ];
      // 目标数据
      /* 
        var data = {
          name: "视频广告",
          type: "bar",
          barWidth: 25,//柱图宽度
          stack: "广告",
          data: [0, 0, 0, 154],
        }; 
      */
      //
      let seriesArr= [];//series
      let XLabel = [];//x轴数据
      datas.map((item, index) => {
        XLabel.push(item.name);
        let obj = {};
        obj.name = item.name;
        obj.type = "bar";
        obj.barWidth = 25;
        obj.stack = "广告";
        obj.data = [];
        for (var i = 0; i <= index; i++) {
          if (i != index) {
            obj.data.push(0);
          } else {
            obj.data.push(item.value);
          }
        }
        seriesArr.push(obj);
      });
      var option = {
        color: ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#00FFF8"],
        legend: {
          top: "3%",
          right: "5%",
          icon: "rect",
          itemWidth: 13,
          itemHeight: 13, //图例宽高
          textStyle: {
            color: "#A0B2D3",
            fontSize: 20,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          //trigger: 'axis',    //显示其他分类
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            return (
              '<span style="font-size:20px">' +
              params.name +
              "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              ';font-size:20px;">' +
              params.value +
              "个" +
              "</span>" +
              "</span>"
            );
          },
        },
        xAxis: [
          {
            type: "category",
            data:XLabel,
            axisTick: {
              // 轴刻度
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "#A0B2D3",
              fontSize: 20,
            },
            axisLine: {
              // 轴线
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "个",
            nameTextStyle: {
              color: "#A0B2D3",
              fontSize: 20,
              padding: [0, 0, 0, -30], //name文字位置 对应 上右下左
            },
            axisTick: {
              // 轴刻度
              show: false,
            },
            splitLine: {
              // 网格线
              show: false,
            },
            axisLine: {
              // 轴线
              show: false,
            },
            axisLabel: {
              // 轴文字
              color: "#A0B2D3",
              fontSize: 20,
            },
          },
        ],
        //series:[
          // {
          //   name: "直接访问",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [320],
          // },
          // {
          //   name: "邮件营销",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [0, 132],
          // },
          // {
          //   name: "联盟广告",
          //   type: "bar",
          //   stack: "广告",
          //   barWidth: 25,
          //   data: [0, 0, 191],
          // },
          // {
          //   name: "视频广告",
          //   type: "bar",
          //   barWidth: 25,
          //   stack: "广告",
          //   data: [0, 0, 0, 154],
          // },
        series: seriesArr,
      };

      let myChart = this.$echarts.init(document.getElementById("bar"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}

3、

 mounted() {
    this.initChart();
  },

以上