echaarts水滴(水球图)波浪效果

效果图

首先放盒子

   <div class="wtChartBall_box">
            <div class="d_flex">
              <div id="wtChartBall" style="width: 220px; height: 200px" />
              <div id="wtChartBall_2" style="width: 220px; height: 200px" />
            </div>
            <div class="d_flex">
              <div id="wtChartBall_3" style="width: 220px; height: 200px" />
              <div id="wtChartBall_4" style="width: 220px; height: 200px" />
            </div>
  </div>

然后代码部分

  mounted() {
    _self = this;
    this.$nextTick(() => {
      this.chartsBall1(); //图表
      this.chartsBall2(); //图表
      this.chartsBall3(); //图表
      this.chartsBall4(); //图表
    });

    window.addEventListener("resize", function () {
      delay(() => {
        _self.myChart1.resize();
      }, 300);
    });
  },

然后调取函数时传颜色和ID以及值

    // 水滴图1
    chartsBall1() {
      this.chartsData(
        "wtChartBall",
        "rgba(37, 207, 240)",
        "rgba(29, 123, 255)",
        0.55
      );
    },
    // 水滴图2
    chartsBall2() {
      this.chartsData(
        "wtChartBall_2",
        "rgba(255, 198, 56)",
        "rgba(229, 124, 0)",
        0.45
      );
    },
    // 水滴图3
    chartsBall3() {
      this.chartsData(
        "wtChartBall_3",
        "rgba(37, 207, 240)",
        "rgba(29, 123, 255)",
        0.55
      );
    },
    // 水滴图
    chartsBall4() {
      this.chartsData(
        "wtChartBall_4",
        "rgba(255, 122, 122)",
        "rgba(255, 51, 85)",
        0.45
      );
    },

最后配置项

    chartsData(name, colo1, colo2, data) {
      _self.myChart1 = this.$echarts.init(document.getElementById(name));

      let option = {
        // 图表主标题
        title: {
          text: "", // 主标题文本，支持使用 \n 换行
          bottom: 60, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 18,
            color: "#fff",
          },
        },
        // 提示框组件
        // tooltip: {
        //   trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        //   textStyle: {
        //     color: '#fff' // 文字颜色
        //   },
        //   // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        //   // 水球图: {a}（系列名称），{b}（无），{c}（数值）
        //   // 使用函数模板   传入的数据值 -> value: number|Array,
        //   formatter: function (value) {
        //     return value.seriesName + ': ' + value.data * 100 + '%'
        //   }
        // },
        series: [
          {
            type: "liquidFill",
            name: "", // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: "70%", // 水球图的半径
            center: ["50%", "50%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: "circle",

            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 0, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: "#fff", // 边框的阴影颜色,'#134547'
                borderColor: "#33C9F0", // 边框颜色 '#134547'
              },
            },
            // 图形样式
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: colo2,
                },
                {
                  offset: 0,
                  color: colo1,
                },
              ]), // 水球显示的背景颜色
              opacity: 0.8, // 波浪的透明度
              shadowBlur: 10, // 波浪的阴影范围
            },
            backgroundStyle: {
              color: "#407bf3", // 水球未到的背景颜色
              opacity: 0.2,
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8, // 鼠标经过波浪颜色的透明度
              },
            },
            // 图形上的文本标签
            label: {
              color: "#fff",
              position: ["50%", "50%"],

              normal: {
                position: ["50%", "80%"], // 设置标签显示的位置
                textStyle: {
                  fontSize: 19, //修改字体大小
                  fontWeight: 500,
                  fontFamily: " DINPro-Medium, DINPro",
                },
              },
            },
            data: [data], // 系列中的数据内容数组
          },
        ],
      };

      _self.myChart1.setOption(option);
    },