echarts 水球示例

使用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
                    //         }
                    //     }
                    // }
                }
            ]
        };
 
    }
}

实现的效果：