echarts-liquidfill查看官方文档
安装
npm install echarts --savenpm install echarts-liquidfill --save
vue main.js 中注册
import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'
组件中使用
<template><div style="width: 400px; height: 400px" ref="hygrometer"></div></template><script>export default {data() {},mounted() {this.drawLiquidfill();},methods: {drawLiquidfill() {let percentage = "60%";// 基于准备好的dom，初始化echarts实例let hygrometer = this.$echarts.init(this.$refs.hygrometer);// 使用指定的配置项和数据显示图表hygrometer.setOption({title: {text: "超越了" + percentage + "的本校教师",left: "center",bottom: 0,textStyle: {color: "#333",fontWeight: "400",fontSize: 12,},},backgroundStyle: {clolor: "#fff",},series: [{// name: "睡了",type: "liquidFill",radius: "180px",data: [0.6],label: {normal: {// color: "rgba(0,0,0,0)",// insideColor: "rgba(0,0,0,0)",textStyle: {fontSize: 20,fontWeight: "bold",},},},color: [{type: "linear",x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 1,color: ["#328CDA"], // 0% 处的颜色},{offset: 0,color: ["#9DC9FF"], // 100% 处的颜色},],global: false, // 缺省为 false},],outline: {show: true,borderDistance: 5,itemStyle: {borderColor: "#54B3FC",borderWidth: 3,},},},],});},},};</script>
附： v-charts 中也有水球图https://v-/#/liquidfill
如果觉得《vue中实现水波图（echarts-liquidfill echarts）》对你有帮助，请点赞、收藏，并留下你的观点哦！
