如何在Vue项目中使用Echarts水球图？

如何在Vue项目中使用Echarts水球图？

1、安装水球图所需的依赖包

// 一、下载Echarts图表库和相关依赖文件（以下两种安装方式，可以随意选择）

// npm
npm i -S echarts
npm i -S echarts-liquidfill

// yarn
yarn add echarts -S
yarn add echarts-liquidfill -S

// 二、在需要用到水球图的组件引用它们

// 1、引入echarts图表库
import * as echarts from 'echarts'

// 2、引入水球图的依赖文件
import 'echarts-liquidfill/dist/echarts-liquidfill.min.js'

2、绘制水球

// 这个方法定义好后，可以自行在需要用到的地方去引用这个方法
methods: {
    drawWaterBubble () {
      const myEcharts = echarts.init(this.$refs.innerCircle)
      let options = {
        series:[
          {
            type:'liquidFill',
            outline: {
              show: false
            },
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0)'
            },
            shape: 'circle',
            radius: '100%',
            itemStyle: {
              color: '#1890FF',
              shadowBlur: 0,
              opacity: .7
            },
            data:[0.35],
            label: {
              show: false
            }
          }
        ]
      }
      myEcharts.setOption(options)
    }
  }

3、运行效果