Echarts设置圆环图

效果图

代码及详解

        将饼图设置为圆环图的主要配置是设置饼图的内半径和外半径，对应配置项 radius: ["设置内半径", "设置外半径"] ，内外半径差值越小，圆环图的环越细，相反差值越大则越粗。

html

        echarts图表需要的dom

<div style="width: 100%; height: 328px;" id="domestic-flows"></div>

js

// 初始化echarts实例
let echartsElement = echarts.init(document.getElementById("domestic-flows"));

// 设置图表宽度相对窗口宽度自适应
window.addEventListener("resize", function () {
  echartsElement.resize();
});

// 图表数据
let echartsData = [
  { value: 1048, name: "学生" },
  { value: 735, name: "学生1" },
  { value: 580, name: "学生2" },
  { value: 484, name: "学生3" },
  { value: 300, name: "其他" },
  { value: 5000, name: "未使用" },
];

// 图表配置项
let echartsOption = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    // 设置图例靠右，上下居中，垂直排列
    right: 0,
    top: "center",
    orient: "vertical",
    // 图例图标设置为圆形
    icon: "circle",
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 16,
    padding: [0, 32, 0, 0],
  },
  series: [
    {
      name: "国内流量使用情况",
      // 设置图表类型为饼状图
      type: "pie",
      width: "85%",
      // 设置圆内半径和外半径，将内半径设大以显示成圆环图
      radius: ["38%", "55%"],
      // 设置是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
      // 这里圆环图需要将标签固定在图形中心位置，则需要设置成false
      avoidLabelOverlap: false,
      // 图形上的文本标签设置项
      label: {
        show: true,
        // 设置文本标签在图形中心位置
        position: "center",
        // 自定义文本标签的内容和格式，title是文本'总额度/GB'的样式名，num是文本'10,000'的样式名，.join("\n")是给文本加换行
        formatter: ["{title|总额度/GB}", "{num|10,000}"].join("\n"),
        // 设置formatter中的文本样式，要用对应的标记样式名
        rich: {
          title: {
            padding: [0, 0, 8, 0],
            color: "#424864",
          },
          num: {
            color: "#424864",
          },
        },
      },
      // 标签的视觉引导线配置
      labelLine: {
        // 设置为不显示视觉引导线
        show: false,
      },
      // 高亮状态的扇区和标签样式的设置项
      emphasis: {
        // 不开启高亮后扇区的放大效果
        scale: false,
      },
      // 设置图表数据
      data: echartsData,
    },
  ],
  // 设置系列颜色
  color: ["#428BCA", "#51CBFF", "#B6E9FF", "#FDBCA5", "#FFC5C5", "#E1E1E1"],
};

// 将设置的配置项给echarts实例对象
echartsElement.setOption(echartsOption);