echarts-liquidfill（水球图代码）

 echarts水球图并不在echarts常用图表里，是作为插件使用，所以使用echarts水球图需要先安装echarts和水球图,然后进行注册

先用npm下载，然后在main.js中引入echarts和水球图插件

npm install echarts --save
npm install echarts-liquidfill --save

import echarts from './utils/echarts'
import 'echarts-liquidfill'

 封顶一个单独的水球图组件，使用时直接复用即可，简单方便。

<template>
  <div>
    <div class="box" ref="echarts"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    var myChart = this.$echarts.init(this.$refs.echarts);

    var value = 0.45;
    var value1 = 0.76;

    var option = {
      backgroundColor: "#0F224C",
      title: [
        {
          text: "本年收缴率",
          x: "center",
          y: "60%",
          textStyle: {
            fontSize: 14,
            fontWeight: "100",
            color: "#5dc3ea",
            lineHeight: 16,
            textAlign: "center",
          },
        },
      ],
      series: [
        {
          type: "liquidFill",
          radius: "47%",
          center: ["50%", "30%"],
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#446bf5",
                },
                {
                  offset: 1,
                  color: "#2ca3e2",
                },
              ],
              globalCoord: false,
            },
          ],
          data: [value, value], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: "RGBA(51, 66, 127, 0.7)",
          },
          label: {
            normal: {
              textStyle: {
                fontSize: 20,
                color: "#fff",
              },
            },
          },
          outline: {
            // show: false
            borderDistance: 0,
            itemStyle: {
              borderWidth: 2,
              borderColor: "#112165",
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 140px;
}
</style>