echarts 饼图环形图 lable添加下划线-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts 饼图环形图 lable添加下划线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

echarts 饼图环形图 lable添加下划线,echarts,echarts,javascript,前端

        series: [
          {
            itemStyle: { borderRadius: 8 },
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "50%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                formatter: function(params) {
                  if (params.name === "未上市") {
                    return (
                      "{a|" + params.name + "}\n" + "{b|" + params.value + "}个"
                    ); // 自定义标签格式
                  } else {
                    return (
                      "{a|" +
                      params.name +
                      "}\n" +
                      "{b|" +
                      params.value +
                      "}个" +
                      "\n" +
                      "{c|}"
                    ); // 自定义标签格式
                    // return params.name + "\n" + params.value + "个"; // 自定义标签格式
                  }
                },

                rich: {
                  a: {
                    padding: [0, -12, 20, 0],
                    fontSize: 16
                  },
                  b: {
                    fontSize: 16
                  },
                  c: {
                    width: 26,
                    height: 0,
                    borderWidth: 1,
                    borderColor: "#636363"
                  }
                },

                color: "inherit",
                border: "none",
                // padding: [0, -62, 50, -62], // 关键代码！关键代码！关键代码！
                padding: [0, -42, -10, -42], // 关键代码！关键代码！关键代码！
                fontSize: 16
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 60
              },
              emphasis: {
                show: false
              }
            },
            data: self.chartData
          }
        ]

    drawPie(page) {
      const self = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("areaPie"));
      // 指定图表的配置项和数据
      const option = {
        color: [
          "#F86464",
          "#19DC7C",
          "#34A6FE",
          "#FA9022",
          "#DCDB01",
          "#8C70F8",
          "#2A4AD1",
          "#E76FE3",
          "#5032C0",
          "#168FB2"
        ],
        grid: {
          containLabel: true,
          left: "10%"
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 14
          },
          formatter: "{b} : {c} ({d}%)"
        },
        series: [
          {
            itemStyle: { borderRadius: 8 },
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "50%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                formatter: function(params) {
                  if (params.name === "未上市") {
                    return (
                      "{a|" + params.name + "}\n" + "{b|" + params.value + "}个"
                    ); // 自定义标签格式
                  } else {
                    return (
                      "{a|" +
                      params.name +
                      "}\n" +
                      "{b|" +
                      params.value +
                      "}个" +
                      "\n" +
                      "{c|}"
                    ); // 自定义标签格式
                    // return params.name + "\n" + params.value + "个"; // 自定义标签格式
                  }
                },

                rich: {
                  a: {
                    padding: [0, -12, 20, 0],
                    fontSize: 16
                  },
                  b: {
                    fontSize: 16
                  },
                  c: {
                    width: 26,
                    height: 0,
                    borderWidth: 1,
                    borderColor: "#636363"
                  }
                },

                color: "inherit",
                border: "none",
                // padding: [0, -62, 50, -62], // 关键代码！关键代码！关键代码！
                padding: [0, -42, -10, -42], // 关键代码！关键代码！关键代码！
                fontSize: 16
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 60
              },
              emphasis: {
                show: false
              }
            },
            data: self.chartData
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      myChart.on("click", "series.pie.label", async function(params) {
        self.fundType = params.name;
        if (
          (params.name == "境内上市" || params.name == "境外上市") &&
          self.type == 1
        ) {
          const param = {
            currentPage: page || 1,
            pageSize: 10,
            state: params.name,
            yearAndMonth: sessionStorage.getItem("selectTime")
          };
          const res = await getDetailDialog("api/zdFunddmp/status/list", param);
          self.detailDialogData = res;
          self.dialog_visible = true;
        }
      });

      // 窗口缩放后重新调整图标尺寸
      window.onresize = function() {
        myChart.resize();
      };
    },

文章来源地址https://www.toymoban.com/news/detail-699764.html

到了这里，关于echarts 饼图环形图 lable添加下划线的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！