echarts5.2.2实现 水球图表

需求背景

需要做一个水球echarts图表效果，却发现echarts5以上版本已移除liquidFill类型

echarts 图表集链接

解决思路

引入 echarts-liquidfill^3.1.0

解决效果

index.vue

<!--/*** @author: liuk* @date: 2024-10-24* @describe: 水情水球图表*/--><template><div ref="chatDom" class="waterConditionLiquiChartChart"></div>
</template><script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import "echarts-liquidfill"
import {formatToFixed, getEquiUnit} from "@/utils/dictionary";// Props
const props = defineProps(['data'])let myChart = null // Vue3 使用 proxy 对象代理，而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug。
const chatDom = ref(null)watch(() => props.data, (data) => {nextTick(() => {if (!myChart) returndrawChart()const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, data))})
}, {immediate: true})onMounted(() => {drawChart()window.addEventListener('resize', () => {drawChart()const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, props.data,))});
})const renderFn = (option, data) => {// option.series[0].data[0].value = data.num || 0// option.series[0].max = data.total || 0return option
}const drawChart = () => {let chartDom = chatDom.valueif (chartDom == null) {return}echarts.dispose(chartDom)myChart = echarts.init(chartDom)const option = {series: [{type: 'liquidFill',phase: 0.1,amplitude: 10,data: [{value: 0.6,},{value: 0.6,}],radius: '90%',// 波浪颜色itemStyle: {shadowBlur: 5,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(34,189,171, 1)',},{offset: 0.5,color: 'rgba(48,166,195, 1)',},{offset: 1,color: '#3D8BCF',},],globalCoord: false,}},backgroundStyle: {color:'rgba(5, 108, 252, 0.1)',borderWidth: 5,borderColor: 'transparent'},outline: {show: false},// 水波图标签配置label: {show: true,align: 'center',distance: 50,color: '#fff',fontSize: 32,}}]}option && myChart.setOption(option)
}</script><style lang="scss" scoped>
.waterConditionLiquiChartChart {width: 100%;height: 100%;
}
</style>
<style lang="scss" >
.waterConditionLiquiChartChart-popup {overflow: hidden;font-size: 12px;color: #fff;.top {//margin-bottom: 16px;font-weight: bold;}.item {display: flex;align-items: center;margin: 5px 0;&:last-child {margin-bottom: 0;}.icon {display: inline-block;width: 12px;height: 12px;margin-right: 10px;border-radius: 50%;background: rgba(0, 166, 255, 1);}.name {width: 50px;margin-right: 10px;}.value {flex: 1;text-align: right;}}
}
</style>