绘制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 / 100let 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社区里面找，网址在我前面分享的前端网站那个文章里面。