vue中使用echarts-liquidfill实现水波图

先看效果图：

第一步：在package.json中添加依赖

    "echarts": "^4.4.0",
    "echarts-liquidfill": "^2.0.5",

然后 npm i    注意：先安装低版本的echarts-liquidfill，之前试了3.0以上的版本会报错，echarts版本可随意

第二步：在main.js中引入echarts和echarts-liquidfill

import echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts ;

第三步：使用

html：

<div>
    <div id="chartmainbar1"></div>
    <div id="chartmainbar2"></div>
    <div id="chartmainbar3"></div>
</div>

css：

    #chartmainbar1,
    #chartmainbar2,
    #chartmainbar3 {
      width: 150px;
      height: 150px;
      float:left;
    }

（1）在methods中封装加载水波图的函数（因为我需要加载三个，因此封装了一下）

直接复制就行：

    liquidCharts(id, data, borderC, color0, color100) {
      let dom = document.getElementById(id);
      let myChart = this.$echarts.init(dom);
      let app = {};
      let option = null;
      option = {
        // 图表主标题
        title: {
          show:false,
          text: "槽使用情况",
          // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "10px",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "0px",
          // itemGap设置主副标题纵向间隔，单位px，默认为10，
          itemGap: 30,
          backgroundColor: "#fff",

          // 主标题文本样式设置
          textStyle: {
            fontSize: 16,
            fontWeight: "500",
            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: "89%", // 水球图的半径
            center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: "circle",
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 0.9, // 边框的透明度   默认为 1
                borderWidth: 2, // 边框的宽度
                shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: "#fff", // 边框的阴影颜色,
                borderColor: borderC // 边框颜色
              }
            },
            // 图形样式
            // itemStyle: {
            //   color: borderC, // 水球显示的背景颜色
            //   opacity: 0.4, // 波浪的透明度
            //   shadowBlur: 10 // 波浪的阴影范围
            // },
            backgroundStyle: {
              color: "#fff" // 水球未到的背景颜色
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 1 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 26,
              fontWeight: 400,
              color: borderC
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: color0 // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: color100 // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ],
            data: data // 系列中的数据内容数组
          }
        ]
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    },

调用：

    drawLine: function() {
      //基于准本好的DOM，初始化echarts实例
      this.liquidCharts(
        "chartmainbar1", //参数1 id:加载的dom元素的id
        this.data1,      //参数2 data:加入的数据,例如：[0.6]表示60%
        ["#FE916F"],     //参数3 borderD:边框颜色
        ["rgba(249, 146, 113, 0.8)"], //参数4 color0:设置渐变色--水波图0%处的颜色
        ["rgba(255, 255, 255, 1)"]    //参数5 color100:设置渐变色--水波图100%处的颜色
      );
      this.liquidCharts(
        "chartmainbar2",
        this.data1,
        ["#68CDE8"],
        ["rgba(87, 190, 211, 0.8)"],
        ["rgba(255, 255, 255, 1)"]
      );
      this.liquidCharts(
        "chartmainbar3",
        this.data1,
        ["#B59CE2"],
        ["rgba(184, 169, 213, 0.8)"],
        ["rgba(255, 255, 255, 1)"]
      );
    },

（2）mounted函数，调用加载并设置echarts图自适应：

  mounted() {
    this.drawLine();
    this.resizeEcharts = () => {
      this.$echarts.init(document.getElementById("chartmainbar1")).resize();
      this.$echarts.init(document.getElementById("chartmainbar2")).resize();
      this.$echarts.init(document.getElementById("chartmainbar3")).resize();
    };
    window.addEventListener("resize", this.resizeEcharts);
  },

更多参数配置请移步官网吧：https://gallery.echartsjs.com/explore.html#tags=liquidFill~sort=rank~timeframe=all~author=all 

以上代码直接复制粘贴就行，有问题的小伙伴评论区见~~