水波图的实现

1：项目引入：

        <div ref="chart" style="width: 130px; height: 130px"></div>

2：vue导入echarts

import * as echarts from "echarts";

import "echarts-liquidfill";

3:vue methods

  initChart() {

      this.chartInstance = echarts.init(this.$refs.chart);

      let value = this.percentage;

      this.chartInstance.setOption({

        gird: {

          top: 0,

          bottom: 0,

          left: 0,

          right: 0,

        },

        series: [

          {

            type: "liquidFill",

            z: 2,

            radius: "80%",

            center: ["50%", "50%"],

            data: [0.3],

            label: {

              fontSize: 30, // 设置数据字体大小

              color: "black", // 设置数据字体颜色

            },

            backgroundStyle: {

              color: "#fff",

            },

            outline: {

              show: true,

              itemStyle: {

                borderWidth: 1.5,  //控制外边框的宽度

                borderColor: "rgb(38,162,255)", //控制外边框的颜色

              },

              borderDistance: 0,

            },

            color: [

              {

                type: "linear",

                x: 0,

                y: 0,

                x2: 0,

                y2: 1,

                colorStops: [

                  {

                    offset: 1,

                    color: "rgb(38,162,255,0.8)", //下

                  },

                  {

                    offset: 0,

                    color: "rgb(38,162,255,0.2)",

                  },

                ],

                globalCoord: false,

              },

            ],

          },

        ],

      });

    },