vue2+echarts实现水球+外层动效

实现效果

安装echarts-liquidfill

• 需要安装echarts-liquidfill！！！
• 需要安装echarts-liquidfill！！！
• 需要安装echarts-liquidfill！！！

安装命令

npm install echarts-liquidfill

版本如图：

实现代码

  data() {return {chart: null,timer: null,angle: 0, //角度，用来做简单的动画效果的list: [],/* this.list = [rate,{value: rate,direction: "left", //波浪方向},]; */};},mounted() {this.$nextTick(() => {this.initChart();});},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();clearInterval(this.timer); // 销毁前，清除时间定时器this.timer = null;},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.chart3Ref);let that = this;let option = {series: [{name: "内线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.3,startAngle: ((0 + that.angle) * Math.PI) / 180,endAngle: ((90 + that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "内线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.3,startAngle: ((180 + that.angle) * Math.PI) / 180,endAngle: ((270 + that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "外线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.1,startAngle: ((270 + -that.angle) * Math.PI) / 180,endAngle: ((40 + -that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "外线",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {return {type: "arc",shape: {cx: api.getWidth() / 2,cy: api.getHeight() / 2,r: Math.min(api.getWidth(), api.getHeight()) / 2.1,startAngle: ((90 + -that.angle) * Math.PI) / 180,endAngle: ((220 + -that.angle) * Math.PI) / 180,},style: {stroke: "#0ff",fill: "transparent",lineWidth: that.fontSize(0.03),},silent: true,};},data: [0],},{name: "线头点",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);return {type: "circle",shape: {cx: point.x,cy: point.y,r: 5,},style: {stroke: "#0ff", //绿fill: "#0ff",},silent: true,};},data: [0],},{name: "线头点",type: "custom",coordinateSystem: "none",renderItem: function (params, api) {let x0 = api.getWidth() / 2;let y0 = api.getHeight() / 2;let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);return {type: "circle",shape: {cx: point.x,cy: point.y,r: 5,},style: {stroke: "#0ff", //绿fill: "#0ff",},silent: true,};},data: [0],},{// value: 50, //  内容 配合formattertype: "liquidFill",radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）center: ["50%", "50%"],data: this.list, // data个数代表波浪数backgroundStyle: {borderWidth: this.fontSize(0.01),color: "rgba(62, 208, 255, 1)", // 球体本景色},amplitude: "6  %", //波浪的振幅// 修改波浪颜色color: [{type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: "#6CDEFC",},{offset: 0,color: "#429BF7",},],globalCoord: false,},],label: {normal: {formatter: function (params) {return params.value * 100 + " %";},textStyle: {fontSize: this.fontSize(0.3),color: "#fff",},},},backgroundStyle: {borderWidth: that.fontSize(0.01),color: "transparent",},outline: {show: true,itemStyle: {borderColor: "#0ff",borderWidth: that.fontSize(0.02),},borderDistance: that.fontSize(0.03),},},{type: "pie",z: 1,center: ["50%", "50%"],radius: ["72%", "75%"], // 控制外圈圆的粗细hoverAnimation: false,data: [{name: "",value: 0,labelLine: {show: false,},itemStyle: {color: "#00AFFF",},emphasis: {labelLine: {show: false,},},},],},],};this.chart.setOption(option);this.timer = setInterval(() => {this.draw();}, 100);},getCirlPoint(x0, y0, r, angle) {let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);return {x: x1,y: y1,};},draw() {this.angle = this.angle + 3;let option = this.chart.getOption();// console.log(option, "option");option.series[6].data = this.list;this.chart.setOption(option);},},