echarts水球图

效果：

一、配置：vue2 + echarts@4 + echarts-liquidfill@2 ，此时控制台没有警示黄框

二、使用水球图

import * as echarts from "echarts";
import "echarts-liquidfill";

三、配置项option

    let option = {
        backgroundColor: "#fff", //背景色
        title: {
          text: "xx比例",
          textStyle: {
            fontSize: 20,
            fontWeight: "bold",
            color: "#000",
          },
          x: "center",
          y: "6%",
        },
        label: {
          show: true,
          formatter: function(params) {
            // console.log("params: ", params);
            // console.log("params.value: ", params.value);
            let labelValue  = params.value === 0 ? (0).toFixed(2) : (params.value * 100).toFixed(2);
            return `{name| xx率}\n{content|${labelValue}%}`;
          },
          rich: {
            name: {
              color: "#333",
              fontSize: "20",
              align: "center",
              padding: [20, 0, 0, 0],
            },
            content: {
              fontSize: 45,
              align: "center",
              color: "#333",
            },
          },
          normal: {
            textStyle: {
              fontSize: 20,
              color: "#000",
            },
          },
        },
        series: [
          {
            type: "liquidFill", //配置echarts图类型
            radius: "70%",
            center: ["50%", "60%"],
            //  shape: 'roundRect',
            // 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
            data: [0.5], //设置波浪的值（或当前要显示的数据变量）
            //waveAnimation:false, //静止的波浪
            backgroundStyle: {
              borderWidth: 1,
              color: "#e3f7ff", //水球图内部背景色
            },
            outline: {
              borderDistance: 6,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#3d9cdd",
              },
            },
            itemStyle: {
              color: "#3d9cdd", //波浪的颜色
              shadowBlur: 10,
              opacity: 0.7,
            },
            silent: true, //可以去除小手的效果和默认样式
          },
        ],
      }

四、另外关注：

        1、 标签两行显示，可借助fomatter属性

        2、 标签不同样式，可借助rich属性

        3、 可以在formatter属性中，实现精度判断。（通常对于小数呈百分数显示时，要根据分母大小判断精度）