theme: qklhk-chocolate
highlight: atelier-sulphurpool-dark

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

昨天产品突然甩了一个任务给我，我一看首页重构？？？好家伙真是怕我闲着，一点摸鱼时间你是也不给啊😭，管理系统首页嘛。复杂一点的就是图表了，其它的都比较简单，当我做完前饼图跟折线图时发现后面居然还有一个水球图，找了三遍echarts官网都没看见水球图的例子，无奈只能去社区寻找了，社区一艘，诶！！还挺多，复制过来一运行，发现运行不了，也不报错，而后看了评论，发现要装一个额外的依赖，好吧我们开始吧！！

引入

要使用水球图必须先安装echarts-liquidfill

// 安装eaharts
npm i echarts
// 安装水球图要的依赖
npm i echarts-liquidfill@2.0.6

引入echart及echarts-liquidfill
import * as echarts from 'echarts'
import 'echarts-liquidfill'

注意：echarts及echarts-liquidfill要对应好版本号，我的echarts是4.9.0，echarts-liquidfill是2.0.6，安装时不带版本号可能会安装不上

使用

我这边是用vue写的，所以使用的是vue例子

首先我们拿一个盒子来装的水球图

<div id="water-polo"></div>

在data中定义需要用的数据

data () {
    return {
      option: null, // 图标对应配置
      proportion: 0.8 // 水球中波浪对应高度
    }
  },

methods中我们写一个渲染图形方法

applyEcharts () {
      let chartDom = document.getElementById('water-polo') // 获取dom元素
      let myChart = echarts.init(chartDom) // 初始化
      this.option = { // 定义配置
        backgroundColor: '#fff', 整个图表背景色
        title: {
          text: '', // 标题
          textStyle: { // 文字样式
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill', // 图表类型
            radius: '80%', // 整个图占比
            center: ['50%', '50%'], // 图标位置
            data: [this.proportion, this.proportion, this.proportion], // data个数代表波浪数
            itemStyle: { // 波浪样式设置
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: { // 球背景样式设置
              borderWidth: 6,
              borderColor: '#448af9',
              color: '#fff'
            },
            // 修改波浪颜色(对应上面波浪个数)
            color: ['#e9ecff', '#bacffe', '#4c7df0'],
            label: {
              normal: {
                // 水球中间显示
                formatter: this.proportion * 100 + '%',
                textStyle: {
                  // 水球中间显示文字大小
                  fontSize: 40
                }
              }
            },
            // 外部圆线
            outline: {
              show: false
            }
          }
        ]
      }
      // 设置配置项
      myChart.setOption(this.option)
    }

以上是我总结的一些水球图配置，每一项配置我已经加好注释，方便jym进行了解，series里面可以配置多个，以便来完成工作上的需求

完整代码

<template>
  <div id="water-polo"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data () {
    return {
      dataList: [],
      option: null,
      proportion: 0.8
    }
  },
  mounted () {
    this.applyEcharts()
  },
  methods: {
    applyEcharts () {
      let chartDom = document.getElementById('water-polo')
      let myChart = echarts.init(chartDom)
      this.option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 25,
            color: 'rgb(97, 142, 205)'
          }
        },
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            data: [this.proportion, this.proportion, this.proportion], // data个数代表波浪数
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            amplitude: 10, // 波浪起伏
            backgroundStyle: {
              borderWidth: 6,
              borderColor: '#448af9',
              color: '#fff'
            },
            // 修改波浪颜色
            color: ['#e9ecff', '#bacffe', '#4c7df0'],
            label: {
              normal: {
                formatter: this.proportion * 100 + '%',
                textStyle: {
                  fontSize: 40
                }
              }
            },
            outline: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="less">
#water-polo {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>