使用echarts实现水滴图

引入依赖，echarts-liquidfill@3兼容echarts@5; 安装依赖

 "echarts": "^5.4.3","echarts-liquidfill": "^3.1.0",

npm install echarts-liquidfill@3.1.0 -S

实现的效果图

构建一个水滴图的页面

<template><div class="dlsFirst"><div style="padding: 50px;">达标情况</div><div class="gender-con" id="proportionCon"></div></div>
</template>
<script>
import "echarts-liquidfill/src/liquidFill.js"; //js引入
export default {data() {return {};},mounted() {const myChart = echarts.init(document.getElementById('proportionCon'));const option = {// backgroundColor: "#485C6D", //背景色series: [{type: "liquidFill", //水位图radius: "90%", //显示比例center: ["50%", "50%"], //中心点amplitude: 20, //水波振幅data: [0.5], // data个数代表波浪数backgroundStyle: {borderWidth: 5, //外边框borderColor: "#33c8ff", //边框颜色// color: "#485C6D" //边框内部填充部分颜色},// color: ["#4db6ac"], //波浪颜色//这是设置波浪渐变色itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#e744ff',},{offset: 1,color: '#33c8ff',},]),},},label: {//标签设置position: ["50%", "30%"],formatter: (params)=>{return (params.data * 100) + '%'}, //显示文本,fontSize: "20px", //文本字号,color: "#fff"},outline: {show: false //最外层边框显示控制}}]}let dbz={max:1000,value:633}option.series[0].data = [dbz.value / dbz.max]// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},
};
</script><style scoped>.gender-con{width:260px;height:300px;}
</style>