如何實現動態水球圖 --》 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方法
頁面完成效果如：
大功告成！！！！