echarts中圖表的圖例設置（單獨設置樣式）

先看效果：

  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("main5"));
    this.option = {
      backgroundColor: "#E5EEF9",
      title: {
        show: false,
        text: "淨收入",
        textStyle: {
          color: "#fff",
          fontSize: 26
        },
        left: 0,
        backgroundColor: "rgba(0,32,96,1)",
        borderColor: "#000"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" }
      },
      grid: {
        top: "25%",
        right: "45",
        bottom: "20",
        left: "30"
      },
// 圖例設置
      legend: [
        {
          top: "15%",
          right: "45%",
          textStyle: {
            // 圖例文字樣式
            color: "black",
            fontSize: 14,
            fontFamily: "微軟雅黑"
          },
          itemWidth: 33, // 圖例圖形的寬度
          itemHeight: 12, // 圖例圖形的高度
          data: [
            {
              name: "收入", // 圖例文字內容
              icon: "roundRect" // 圖例圖形的形狀，有多個可選值：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，
            //也可引用自定義的圖片
              //  icon: "image://https://p1.pstatp.com/list/dfic-imagehandler/8ac89fbe-b30c-4ba0-8d75-02c0f60a7ea6"
            }
          ]
        },
        {
          top: "15%",
          right: "25%",
          textStyle: {
            color: "black",
            fontSize: 14,
            fontFamily: "微軟雅黑"
          },
          itemWidth: 33,
          itemHeight: 12,
          data: [
            {
              name: "完成率",
              icon: "roundRect" //引用自定義的圖片
            }
          ]
        },
        {
          top: "15%",
          right: "10%",
          textStyle: {
            color: "black",
            fontSize: 14,
            fontFamily: "微軟雅黑"
          },
          itemWidth: 33,
          itemHeight: 12,
          data: [
            {
              name: "增幅",
              icon: "roundRect" //引用自定義的圖片
            }
          ]
        }
      ],
      xAxis: [
        {
          type: "category",
          data: ["一月份", "二月份", "三月份", "類別四"],
          axisLine: { lineStyle: { color: "#939495" } },
          axisLabel: {
            textStyle: { color: "#939495", fontSize: "14" }
          }
        }
      ],
      yAxis: [
        {
          show: false,
          type: "value",
          name: "",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 14,
            color: "#939495"
          },
          axisLine: {
            min: 0,
            max: 10,
            lineStyle: { color: "#939495" }
          } //左線色
        },
        {
          show: false,
          type: "value",
          name: "",
          axisLabel: {
            show: true,
            fontSize: 14,
            formatter: "{value} %",
            color: "#939495"
          },
          axisLine: { lineStyle: { color: "#939495" } }, //右線色
          splitLine: {
            show: false,
            lineStyle: { color: "#939495" }
          } //x軸線
        }
      ],
      series: [
        {
          name: "收入",
          type: "bar",
          data: [36.6, 38.8, 40.84, 41.6],
          barWidth: "50",
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: "#4F81BD"
            }
          },
          barGap: "0.2"
        },
        {
          name: "完成率",
          type: "line",
          yAxisIndex: 1,
          data: [5, 6.01, 5.26, 4.48],
          lineStyle: {
            normal: {
              width: 4
            }
          },
          symbol: "none",
          itemStyle: {
            normal: {
              color: "#FFC000"
            }
          },
          smooth: true
        },
        {
          name: "增幅",
          type: "line",
          yAxisIndex: 1,
          data: [5, 2, 5, 6],
          lineStyle: {
            normal: {
              width: 4
            }
          },
          symbol: "none",
          itemStyle: {
            normal: {
              color: "#A9C57C"
            }
          },
          smooth: true
        }
      ]
    };

    this.myChart.setOption(this.option);
    window.addEventListener("resize", function() {
      this.myChart.resize();
    });
  }