echarts中图表的图例设置（单独设置样式）

阳光穿透心脏的1/2处 2023-07-21 05:43 13阅读 0赞

先看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20230528/ff93652900b748f6957ee018c0617621.png