实现需求：动态生成图表节点，生成的节点加载水滴图，水滴图根据不同的状态来显示是否有动画的效果。
1. 安装并引入echarts-liquidfill（需提前引入echarts）
npm install echarts-liquidfill // 安装import 'echarts-liquidfill' // 组件引入
2. 文件代码
template:<div class="station" v-for="(item, index) in list" :key="index"><div :id="`chart${index}`"></div> //根据索引动态生成id</div>methods:// 获取数据getData() {getList().then(res => {this.list = res.dataconst dataList = res.datathis.listLen = res.data.lengthif (this.listLen > 0) {// 节点渲染完再初始化图表，不然会报找不到节点的错误setTimeout(() => {this.initChart()}, 1000)}})},// 初始化图表initChart() {this.list.forEach((val, index) => {let t = this;const myChart = this.$echarts.init(document.getElementById(`chart${index}`))// 三条波幅需要三组数据let data = [val.SerialNumber / 100, val.SerialNumber / 100, val.SerialNumber / 100]let color = '';if (val.Color) {color = val.Color} else {color = '717F91'}myChart.setOption({grid: {top: 0,left: 0,right: 0,bottom: 0},series: [{type: 'liquidFill',shape: 'container',// shape: 'path://M155,0 C204,0 253,5.33333333 302,16 L8,16 C57,5.33333333 106,0 155,0 Z',// center: ['50%', '50%'],radius: '100%',color: [],amplitude: val.TankState == 0 ? 0 : 10, // 波幅label: {show: false},backgroundStyle: {color: 'transparent',},outline: {show: false // 外边框},// 设置颜色渐变color: [new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#' + color},{offset: 0.3,color: '#' + color},{offset: 1,color: "#ffffff"}])],data: data}],})})}
如果觉得《vue引入echarts-liquidfill水滴图并批量动态加载》对你有帮助，请点赞、收藏，并留下你的观点哦！
