实现效果
安装echarts-liquidfill
- 需要安装
echarts-liquidfill
!!! - 需要安装
echarts-liquidfill
!!! - 需要安装
echarts-liquidfill
!!!
安装命令
npm install echarts-liquidfill
版本如图:
实现代码
data() {return {chart: null,timer: null,angle: 0, list: [],};},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],},{type: "liquidFill",radius: "70%", center: ["50%", "50%"],data: this.list, 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();option.series[6].data = this.list;this.chart.setOption(option);},},