如何实现动态水球图 --》 echars结合echarts-liquidfill实现

1）项目中作为项目依赖，安装到项目当中(注意必须要结合echars)

npm install echarts vue-echarts --save

npm install echarts-liquidfill --save

2）在需要使用水晶球的组件里引入liquidFill.js

import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

3）在模板中加入挂载水晶球的DOM节点

<div id="myChartWhater" :style="{width: '340px', height: '220px',}"></div>

4）在方法methods中添加liquidFill调用方法，如

　

在data中先定义：score: 0.8,healthyName: "良好"，

  initWater() {
            let value = this.score;

            let myChart = this.echarts.init(document.getElementById("myChartWhater"));

            let colorScore = this.score * 100;
            let colorList = [];
            if (colorScore >= 90) {
                let color1 = "rgb(45,224,1135)";
                let color2 = "rgb(74,227,141)";
                colorList.push(color1);
                colorList.push(color2);
            } else if (colorScore >= 80 && colorScore < 90) {
                let color1 = "rgb(41,145,235)";
                let color2 = "rgb(0,137,255)";
                colorList.push(color1);
                colorList.push(color2);
            } else if (colorScore >= 60 && colorScore < 80) {
                let color1 = "rgb(219,185,246)";
                let color2 = "rgb(253,208,0)";
                colorList.push(color1);
                colorList.push(color2);
            } else if (colorScore < 60) {
                let color1 = "rgb(207,74,84)";
                let color2 = "rgb(243,17,34)";
                colorList.push(color1);
                colorList.push(color2);
            }
            var data = [];
            data.push(value);
            data.push(value);
            myChart.setOption({
                backgroundColor: "white", //容器背景颜色
                title: {
                    text: "",
                    textStyle: {
                        fontWeight: "normal",
                        fontSize: 25,
                        color: "rgb(97, 142, 205)"
                    }
                },
                series: [
                    {
                        type: "liquidFill",
                        radius: "80%", //水球的半径
                        data: data,
                        backgroundStyle: {
                            color: "white"
                        },
                        label: {
                            normal: {
                                formatter:
                                    "{a|" +
                                    (value * 100).toFixed(0) +
                                    "}" +
                                    " " +
                                    "\n" +
                                    "\n" +
                                    "{b|" +
                                    this.healthyName +
                                    "}",
                                textStyle: {
                                    fontSize: 55 //字体大小
                                },
                                position: ["50%", "50%"],
                                rich: {
                                    //富文本 对字体进一步设置样式。a对应的value,b对应的healthyName
                                    a: {
                                        fontSize: 60,
                                        lineHeight: 10,
                                        fontWeight: "bold",
                                        padding: [0, 0, 0, 20]
                                    },
                                    b: {
                                        fontSize: 30,
                                        lineHeight: 10,
                                        fontWeight: "bold"
                                    }
                                }
                            }
                        },
                        outline: {
                            show: true, //是否显示轮廓 布尔值
                            borderDistance: 0, //外部轮廓与图表的距离 数字
                            itemStyle: {
                                borderColor: "#edf2f6", //边框的颜色
                                borderWidth: 1 //边框的宽度
                            }
                        },
                        color: [...colorList]
                    }
                ]
            });
        }

 

5）在mounted（）{}中调用 initWater方法
页面完成效果如：
大功告成！！！！