使用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的相关属性赋值给$e
this.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
// }
// }
// }
}
]
};
}
}
实现的效果: