绘制echarts-liquidfill水球图

---

一、效果图

二、步骤

1.安装插件

npm install echarts
npm install echarts-liquidfill

echarts@5的版本与echarts-liquidfill@3兼容，echarts@4的版本与echarts-liquidfill@2兼容,安装的时候需要注意

2.引入

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

2.主要代码

代码如下（示例）：

<template>
	<div class="containerClass">
		<div class="centerPie"></div>
	    <div class="boxChart">
	      <div class="boxChart-text">
	        <div>
	          <span class="span1">{{mbwcl}}</span>
	          <span class="span1" style="font-size: 30px">%</span>
	        </div>
	        <div>
	          <span class="span2">目标完成率</span>
	        </div>
	      </div>
	      <div style="width: 100%;height: 100%" ref="myChart"></div>
	    </div>
	</div>
</template>
<script>
import  * as echarts  from 'echarts'
import 'echarts-liquidfill'
export default {
  name: "part_center",
  data(){
    return{
      myChart:null,
      //水球图数据
      mbwcl:23.14,
    }
  },
  mounted() {
    if (this.myChart) {
      this.myChart.dispose()
    }
    setTimeout(()=> {
      this.$nextTick(()=>{
        this.drawChart(this.mbwcl)
      })
    },100)
  },
  methods:{
    drawChart(val){
      this.myChart = echarts.init(this.$refs.myChart)
      let value = val / 100
      let option = {
        series: [
          {
            type: 'liquidFill',
            radius: '85%',
            center: ['50%', '50%'],
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ["rgba(2,144,255,0.4)"], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ["rgba(45,175,230,0.8)"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
            data: [value, value, value], // data个数代表波浪数
            amplitude: 15,
            // 图形样式
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'transparent',
              color: 'transparent',
            },
            label: {
              show: false,
              textStyle: {
                color: '#5594fa',
                insideColor: '#12786f',
                fontSize: 40,
              },
              formatter: (params) => {
                return `${(params.value * 100).toFixed(2)}%`;
              },
            },
            outline: {
              show: false,
            },
          },
        ],
      }
      this.myChart.setOption(option)
    },
  }
}
</script>
<style scoped lang="less">
.containerClass{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: '#061530';
  .centerPie{
    position: absolute;
    top: 18px;
    left: calc((100% - 358px) / 2);
    width: 358px;
    height: 356px;
    background: url("../img/组54820.png");
    background-size: 100% 100%;
  }
  .boxChart{
    position: absolute;
    top: 47px;
    left: calc((100% - 300px) / 2);
    width: 300px;
    height: 300px;
    //background: transparent;
    .boxChart-text{
      position: absolute;
      width: 300px;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 20;
      text-align: center;
      .span1{
        font-size: 48px;
        font-family: DingTalk-JinBuTi;
        font-weight: bold;
        background-image: linear-gradient(to bottom, #fff, #7dd1ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .span2{
        font-size: 22px;
        color: #fff;
      }
    }
  }
}
</style>

2.素材图片

---

总结

这个仅仅只是简单的一个例子，如果要完成更复杂的功能，可以在echarts社区里面找，网址在我前面分享的前端网站那个文章里面。