使用echarts水球要先安装水球的依赖。
npm i echarts-liquidfill
代码:
// import Common from "./common";import * as echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";// ecahrts的水球
export default class Water{constructor(el, option) {// super(el, option); // 调用父类的构造函数中的值this.$el = el;this.$e = echarts;//将echrts的相关属性赋值给$ethis.option = option;this.init();}init() {this.myChart = this.$e.init(this.$el);// this.$el是要展示echarts的容器, this.$e.init表示调用echarts下面的init方法this.setCharts(); // 调用init方法this.myChart.setOption(this.chartOption, true);window.addEventListener("resize", () => { // 监听resize方法,如果触发这个事件,则调用父类中定义的这个方法this.myChart.resize();});}setCharts() {this.chartOption = {backgroundColor:"transparent",series: [{type: "liquidFill",radius: "90%",data: [this.option.data / 100,{value: (this.option.data - 10) / 100,direction: "left"}],backgroundStyle: {borderWidth: 0.5,color:{type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'rgba(0,24,55, 0)'},{offset: 0.25,color: 'rgba(0,24,55, 0)'},{offset: 1,color: this.option.color}],globalCoord: false}},label: {textAlign: "center",textStyle: {fontSize: 18,fontWeight: "600",color: "#fff",textAlign: "center",textBorderColor: "red",textShadowColor: "red",textShadowBlur: "0",textShadowOffsetX: 0,textShadowOffsetY: 1}},color: [{type: "linear",x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: [this.option.color] // 0% 处的颜色}, {offset: 1,color: [this.option.color] // 100% 处的颜色}],global: false // 缺省为 false}],outline: { // 水球的外轮廓边框show: false,borderDistance: 2,itemStyle: {borderColor: this.option.color ,borderWidth: 1,}},// backgroundStyle: {// color: "rgba(67,209,100,.3)"// }// outline: {// show: true,// borderDistance: 5,// color:"red",// itemStyle: {// borderWidth: 0,// color: {// type: "linear",// x: 0,// y: 0,// x2: 1,// y2: 0,// colorStops: [{// offset: 0, color: "#fff" // 0% 处的颜色// }, {// offset: 1, color: "#fff" // 100% 处的颜色// }],// global: false // 缺省为 false// }// }// }}]};}
}
实现的效果: