echarts实现水波圆形图

引入插件

<script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js"
    type="text/javascript" charset="utf-8"></script>

html

<div  id="teachers"></div>

option

option3 = {
  title: {
    left: "center",
    top: "50",
    textStyle: {
      fontWeight: "normal",
      fontSize: 20,
      color: "rgb(0,0,0)"
    },
    subtext: `1:3`, //副标题
    subtextStyle: {
      fontWeight: "bold",
      fontSize: 40,
      color: "#3E76F0"
    }
  },

  series: [
    {
      type: "liquidFill", // 图表类型
      radius: "60%",
      center: ["50%", "50%"],
      data: [
        1 / 3,
        1 / 4,
        1 / 5
      ], // data个数代表波浪数
      backgroundStyle: {
        borderWidth: 1,
        color: "#282d39"
      },
      color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "rgba(255,255,255,1)"
            },
            {
              offset: 0,
              color: "rgba(103,205,251,1)"
            }
          ],
          globalCoord: false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "rgba(187,248,252,0.5)"
            },
            {
              offset: 0,
              color: "rgba(30,134,245,1)"
            }
          ],
          globalCoord: false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "rgba(180,251,255,0.66)"
            },
            {
              offset: 0,
              color: "rgba(128,122,254,0.66)"
            }
          ],
          globalCoord: false
        }
      ],
      outline: {
        show: false
      }
    },
    //外层线
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["67%", "70%"], //外层线粗细
      hoverAnimation: false,
      data: [
        {
          name: "",
          value: 100,
          labelLine: {
            show: false
          },
          itemStyle: {
            color: "#4b4956"
          },
          emphasis: {
            labelLine: {
              show: false
            },
            itemStyle: {
              // color: "#5886f0"
            }
          }
        }
      ]
    },
    //进度线
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["65%", "70%"], //进度线粗细
      hoverAnimation: false,
      data: [
        {
          name: "",
          value: 50, //进度
          labelLine: {
            show: false
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 2,
              colorStops: [
                // !! 在此添加渐变过程色 !!
                { offset: 0, color: "#33E2ED" },
                { offset: 1, color: "#807AFE" }
              ]
            }
          },
          emphasis: {
            labelLine: {
              show: false
            },
            itemStyle: {
              // color: "#5886f0"
            }
          }
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: 100 - 50,
          itemStyle: {
            color: "rgba(0,0,0,0)"
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          emphasis: {
            labelLine: {
              show: false
            },
            itemStyle: {
              color: "#050038"
            }
          }
        }
      ]
    }
  ]
}

渲染

   var myChart3 = echarts.init(document.getElementById('teachers'));
    myChart3.setOption(option3);