通过echarts-liquidfill插件实现水球图

最近有个页面，需要使用水球图，搜索了很多网站，以下是我的一些配置，以后再用到的时候，找资料没有这么麻烦，也希望可以帮助更多的人； 不要问为什么这么操作，我还是个初学者，希望有经验的大佬多多指点；

第一步：下载插件；

    npm install echarts
    npm install echarts-liquidfill

第二步：导包；

import * as echarts from 'echarts'
import 'echarts-liquidfill'

第三步：修改配置项；

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(`#${this.item.name}`))

    // 指定图表的配置项和数据
    const option = {
      series: [
        {
          type: 'liquidFill',
          radius: '90%',
          data: [{ // 水球图数据
            value: this.value / 100,
            itemStyle: { // 水球图数据样式
              color: this.item.color,
              shadowBlur: 0
            }
          }],
          backgroundStyle: { // 水球图内部背景色
            color: this.item.bgColor
          },
          label: { // 百分比颜色
            fontSize: 20,
            color: '#333',
            insideColor: '#333',
            fontWeight: 400
          },
          // 外部细圆
          outline: {
            show: true,
            borderDistance: 6,
            itemStyle: {
              borderWidth: 2,
              borderColor: this.item.color
            }
          }
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

第四步：封装组件，传入参数，在页面组件之后，就可以看到了；如下图