vue+echarts 创建水球图组件

效果图

下载

npm install echarts-liquidfill --save

注册

在main.js中引入

import "echarts-liquidfill";

编写组件

<template>
  <div class="fill">
    <div class="fill__chart" ref="fill"></div>
  </div>
</template>

<script>
export default {
  props: ["name", "value"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    name() {
      this.init();
    },
    value() {
      this.init();
    },
  },
  methods: {
    init() {
      let chartDom = this.$refs.fill;
      if (chartDom) {
        let myChart = this.$echarts.init(chartDom);
        var value = this.value;
        var data = [value, value, value];
        let option = {
          title: {
            text: (value * 100).toFixed(0) + "{a|%}",
            textStyle: {
              fontSize: 25,
              fontFamily: "Microsoft Yahei",
              fontWeight: "normal",
              color: "#fff",
              rich: {
                a: {
                  fontSize: 25,
                },
              },
            },
            x: "center",
            y: "35%",
          },
          graphic: [
            {
              type: "group",
              left: "center",
              top: "55%",
              children: [
                {
                  type: "text",
                  z: 100,
                  left: "10",
                  top: "middle",
                  style: {
                    fill: "#fff",
                    text: this.name,
                    fontSize: 18,
                  },
                },
              ],
            },
          ],
          series: [
            {
              type: "liquidFill",
              radius: "80%",
              center: ["50%", "50%"],
              data: data,
              backgroundStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0.5,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(68, 145, 253, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(68, 145, 253, .25)",
                    },
                    {
                      offset: 0,
                      color: "rgba(68, 145, 253, 1)",
                    },
                  ],
                  globalCoord: false,
                },
              },
              outline: {
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 5,
                  borderColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(0,255,255, 0)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(0,255,255, .55)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0,255,255, 1)",
                      },
                    ],
                    globalCoord: false,
                  },
                  shadowBlur: 10,
                  shadowColor: "#000",
                },
              },
              label: {
                normal: {
                  formatter: "",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        myChart.resize();
        let sizeFun = () => {
          myChart.resize();
        };
        window.addEventListener("resize", sizeFun);
        this.$once("hook:beforeDestroy", function () {
          this.$echarts.dispose(myChart);
        });
      }
    },
  },
};
</script>

<style lang="less">
.fill {
  height: 100%;
  position: relative;
  &__chart {
    height: 70%;
    width: 150px;
    position: absolute;
    bottom: 20px;
  }
}
</style>

使用

<fill
   :name="item.name"
   :value="item.value"
   v-for="(item, index) in fillInfo"
   :key="index"
></fill>