水球图案例详解

 复杂版本，可以npm 装好 echarts 和 echarts-liquidfill 之后，直接复制代码运行即可看到。

摘取自己有用到的地方就行。

如果你觉得有用别忘记点赞收藏~

npm 版本
    "echarts": "^4.9.0",
    "echarts-liquidfill": "^2.0.6",


sqt() {
      var myChart = this.$echarts.init(this.$refs.sqt);
      var option = {
        // backgroundColor: "pink",
        title: [  // 可以用这种方式展示图中文字，还可以用 formatter 展示
          /*{
            text: "50",
            top: "40%",
            left: "48%",
            textAlign: "center",
            // backgroundColor: "#8E0029",
            borderRadius: 10,
            padding: [2, 9],
            textStyle: {
              fontSize: "40",
              fontWeight: "400",
              color: "#fff"
              // textAlign: "center",
              // textBorderColor: "rgba(0, 0, 0, 0)",
              // textShadowColor: "#000",
              // textShadowBlur: "0",
              // textShadowOffsetX: 0,
              // textShadowOffsetY: 1
            }
          },*/
          {
            text: "首要污染物：",
            left: "center",
            bottom: "4%",
            textStyle: {
              fontWeight: "normal",
              fontSize: 14,
              color: "#fff"
            }
          },
          {
            text: "aqidj",
            left: "center",
            bottom: "16%",
            backgroundColor: "pink",
            borderRadius: 10,
            padding: [2, 9],
            textStyle: {
              fontWeight: "normal",
              fontSize: 14,
              color: "#fff"
            }
          }
        ],
        series: [
          {
            radius: "50%", // 水球图大小
            z: 1,
            center: ["50%", "40%"], // 第一个参数是左右，第二个参数是上下
            amplitude: 20, // 振幅 也就是波动的高度
            data: [0.5, 0.5, 0.5],
            /*data: [  // 数据用这种格式，切换页面会卡一下
              {
                value: 0.4,
                direction: "right"
              },
              {
                value: 0.4,
                direction: "left"
              },
              {
                value: 0.4,
                direction: "left"
              }
            ],*/
            backgroundStyle: {
              // 将背景隐藏了
              borderWidth: 1,
              color: "rgb(255,0,255,0.1)"
            },
            label: {
              // 把中间的字隐藏了，用了 title 的文字
              normal: {
                formatter: function(val) {
                  console.log("---***---", val.value);
                  return val.value * 100 + "%";
                },
                color: "#fff",
                textStyle: {
                  color: "#fff",
                  fontSize: "32"
                }
              }
            },
            outline: {
              // 外面的圆圈
              show: true,
              itemStyle: {
                borderWidth: 4
              },
              borderDistance: 0
            },
            type: "liquidFill",
            // data: [0.5, 0.4, 0.3],
            color: ["red", "#0f0", "rgb(0, 0, 255)"],
            itemStyle: {
              opacity: 0.6
            },
            emphasis: {
              itemStyle: {
                opacity: 0.9
              }
            }
          },
          {
            type: "pie", // 圆饼
            center: ["50%", "40%"],
            radius: ["50%", "52%"], // 控制圆饼的大小，1：外面的圆径 2：里面的圆径
            hoverAnimation: false, // 鼠标悬停没有动画效果
            data: [
              {
                name: "",
                value: 200,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: "#009cff" // 圆饼的颜色
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "#009cff"
                  }
                }
              },
              {
                //画中间的图标
                name: "",
                value: 1,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  // color: "#ffffff",
                  normal: {
                    color: "#009cff",
                    borderColor: "#009cff",
                    borderWidth: 10
                    // borderRadius: '100%'
                  }
                }
                // label: {
                //   borderRadius: "100%"
                // },
                // emphasis: {
                //   labelLine: {
                //     show: false
                //   },
                // itemStyle: {
                //   color: "#009cff"
                // }
                // }
              },
              {
                // 解决圆点过大后续部分显示明显的问题
                name: "",
                value: 2.2,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: "#009cff"
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "#009cff"
                  }
                }
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: 50,
                itemStyle: {
                  color: "rgba(9,59,118,0.95)"
                }
                // label: {
                //   show: false
                // },
                // labelLine: {
                //     show: false
                //   },
                //   emphasis: {
                //     labelLine: {
                //       show: false
                //     },
                //     itemStyle: {
                //       color: "rgba(255,255,255,0)"
                //     }
                //   }
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    }