echarts通用环形图

zsd_666

已于 2023-07-21 10:37:08 修改

阅读量133

点赞数

文章标签： echarts 前端 javascript

于 2023-04-25 21:29:06 首次发布

本文链接：https://blog.csdn.net/zhao3756/article/details/130374361

版权

echarts通用环形图

效果如下:
在这里插入图片描述

<div class="chart-box">
  <div ref="pieChart" id="pieChart" class="pieChart"
  style="height: 100%; width: 100%"></div>
</div>

getData() {
      const myChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          show: true,
          text: "测试项目名称", // \n可以换行
          x: "49%", // center
          y: "center",
          textAlign: "center",
          textStyle: {
            fontSize: "16",
            fontStyle: "normal",
            fontWeight: "600",
            lineHeight: "28",
            color: "#fff",
          },
        },
        // 带子标题
        // title: {
        // 	show: true,
        //    text: "测试项目名称",
        //    subtext: "测试子标题",
       //     textStyle: {
        //      fontSize: 20,
       //       color: "#ffffff",
        //      fontWeight: 400,
        //    },
       //     subtextStyle: {
        //      fontSize: 12,
       //       color: "#ffffff",
       //       fontWeight: 500,
      //      },
       //     textAlign: "center", //图例文字居中显示
       //     x: "48%", //距离左边的距离
        //    y: "37%", //距离上边的距离
       //   },
        tooltip: {
            trigger: "item",
            formatter: "{b} :  {d}%",
          },
        color: ["#199BB7", "#01CD9E", "#DE8055", "#C9C83A"],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            label: {
              normal: {
                show: true,
                color: "#BAE9FF",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 20,
              },
            },
            tooltip: {
                formatter(params) {
                  return (
                    params.name +
                    "  " +
                    params.value +
                    "  " +
                    params.percent +
                    "%"
                  );
                },
              },
            data: [
              { value: 22, name: "名称1" },
              { value: 3, name: "名称2" },
              { value: 4, name: "名称3" },
              { value: 5, name: "名称4" },
            ],
          },
        ],
      };

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