【大数据可视化系列三】echarts科技感环形图

        该文章主要实现echarts科技感环形图，用到的是gauges仪表盘图表，先上最终效果图。 

         从完成图可以看到环形图主要是由三个同心圆环组合成一个环形，最外圈和最内圈是装饰作用，样式是固定的，不会因为数值的变化而变化，中间的圆环才是主要展示数值效果的。下面是三个圆环主要代码。

1. 中间数值圆环代码【主要思路：为了实现蓝色部分与黄色部分有空隙，开始角度与结束角度的绝对值相加不等于360度，另外线条两端圆角】

   {
     type: "gauge", // 仪表盘
     startAngle: 30, // 环形图开始角度
     endAngle: -318, // 环形图结束角度，留出一点空隙，保证环形图首尾不相连
     center: ["50%", "45%"], // 圆心位置
     radius: "73%", // 圆环直径大小
     pointer: {
       show: false,
     },
     progress: { // 黄色数值样式
       show: true,
       roundCap: true, // 两端圆角
       width: 6, // 圆环粗细
       clip: true,
       itemStyle: {
         color: "#FFB400",
       },
     },
     // 圆环背景样式，黄色数值部分是透明背景，其余部分则由蓝色背景组成
     axisLine: {
       roundCap: true, // 两端圆角
       lineStyle: {
         width: 6,
         color: [ // +0.03是为了让蓝色部分和黄色留出空隙首尾不相连
           [this.chartValue / 100 + 0.03, "transparent"],
           [1, "#1890FF"],
         ],
       },
     },
     splitLine: {
       show: false,
     },
     axisTick: {
       show: false,
     },
     axisLabel: {
       show: false,
     },
     // 圆环中心数值文案样式
     detail: {
       position: "center",
       fontFamily: "ds-digitalbold", // 字体样式没用默认的，替换成更有科技感的字体
       fontSize: 21,
       lineHeight: 13,
       offsetCenter: ["0%", "-12%"],
       color: "#fff",
       formatter: "{value}%\n{hr|}",
       rich: {
         hr: {
           borderColor: "rgba(255, 255, 255, 0.4)",
           width: "38%",
           borderWidth: "0.5",
           height: "0",
           padding: [0, 0, 0, 38],
         },
       },
     },
     // 圆环中心标题文案样式，示例中标题为：完成率
     title: {
       fontSize: 12,
       color: "#fff",
       offsetCenter: ["0%", "35%"],
     },
     data: [
       {
         value: 20, // 数值
         name: '完成率', // 标题
       },
     ],
   },

2. 内圈圆环样式代码【与外圈不同，主要显示了splitline分割线】

   {
     type: "gauge", // 仪表盘
     startAngle: 135, // 开始角度
     endAngle: -225, // 结束角度
     center: ["50%", "45%"], // 圆心位置
     radius: "58%", // 圆环直径大小
     pointer: {
       show: false,
     },
     detail: {
       show: false,
     },
     axisLine: {
       lineStyle: {
         width: 2,
         color: [[1, "#fff"]],
         opacity: 0.4,
       },
     },
     splitNumber: 2,
     splitLine: {
       show: true,
       length: 3,
       distance: 0,
     },
     axisTick: {
       show: false,
     },
     axisLabel: {
       show: false,
     },
   }

3. 外圈圆环样式代码

   {
     type: "gauge", // 仪表盘
     startAngle: 90, // 开始角度
     endAngle: -270, // 结束角度
     center: ["50%", "45%"], // 圆心位置
     radius: "83%", // 圆环直径大小
     pointer: {
       show: false,
     },
     progress: {
       show: true,
       roundCap: true,
       width: 1,
       clip: false,
       itemStyle: {
         color: "#FFB400",
       },
     },
     detail: {
       show: false,
     },
     axisLine: {
       lineStyle: {
         width: 1,
         color: [[1, "#FFF"]],
         opacity: 0.4,
       },
     },
     splitLine: {
       show: false,
     },
     axisTick: {
       show: false,
     },
     axisLabel: {
       show: false,
     },
     data: [
       {
         value: 80,
       },
     ],
   }

        在实际使用中，调用echarts图表代码，series填写上述三个圆环样式，动态传入中间圆环的数值和标题即可灵活实现想要的科技感环形图。

        以上就是本篇文章的全部内容，如果对你有帮助的话点个赞支持一下。我们下篇文章见ヾ(๑╹◡╹)ﾉ"~