如何用echarts写一个简单的环形图呢[新手必看]

如何用echarts写一个简单的环形图呢[新手必看]

先看一下代码效果哦！！

我这个是在vue项目中写echarts 所以我会提前用依赖下载echarts 然后import引入 进行使用

实现效果该怎么样呢 来看代码
html

 <div id="usage-right"></div>

css

  #usage-right {
    width: 25%;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 3px -1px #ccc,
      //底部阴影
      2px 0 3px -1px #ccc; //右边阴影;
  }

先要在js中声明

let bgColor = "#fff";
let title = "总量";
let color = ["#24A4A4", "#607181", "#60B2FF", "#FFAE58"];
let echartData = [
  {
    name: "A类",
    value: "25",
  },
  {
    name: "B类",
    value: "15",
  },
  {
    name: "C类",
    value: "35",
  },
  {
    name: "D类",
    value: "25",
  },
];

写入method方法：

 usageRight(id) {
      this.usagerightone = echarts.init(document.getElementById(id));
      this.usagerightone.setOption({
        backgroundColor: bgColor,
        color: color,
        title: [
          {
            text: formatNumber(total) + "%",
            top: "center",
            left: "center",
          },

          {
            text: "CPU使用情况",
            left: "10",
            top: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
            shadowBlur: 10,
            textStyle: {
              color: "#607181",
              fontWeight: "bolder",
              fontFamily: "思源黑体",
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 2,
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 50,
                lineStyle: {
                  color: "#607181",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return formatNumber(params.value) + "%";
                },
                // padding: [0 , -10, 0, -10],

                rich: {
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                  },
                },
              },
            },
          },
        ],
      });
    },

一定要在data里面写一个数据usagerightone为空
usagerightone:""

一定要在mounted里面调用哦

  this.usageRight("usage-right");