vue echarts 水球图 多个水球图并存配置

echarts 水球图

下面介绍为vue-cli开发环境下
npm下载

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

按需加载,在所需的组件内引入

import echarts from "echarts";
import "echarts-liquidfill"; //在这里引入

组件代码如下(此处为8个水球图并存的页面)

<template>
  <el-row>
    <el-col>
      <div
        :class="className"
        :style="{ height: height, width: width }"
        ref="water"
      />
    </el-col>
  </el-row>
</template>

<script>
import echarts from "echarts";
import "echarts-liquidfill"; //在这里引入
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    waterData: {
      type: Array,
    },
    waterDataColor: {
      type: Array,
    },
  },
  data() {
    return {
      chart: null,
      data: [],
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  // 写watch监听父页面向本组件传递过来的值,改动之后
  // 重新调用this.initWater()渲染视图数据
  watch: {
    waterData(curVal, oldVal) {
      if (curVal) {
        this.waterData = curVal;
        this.waterData.forEach((item) => {
          return this.data.push(item.inRate);
        });
        this.$nextTick(() => {
          this.initWater();
        });
      }
    },
  },
  created() {},
  methods: {
    initWater() {
      this.chart = echarts.init(this.$refs.water);
      this.chart.setOption({
        title: [
          {
            text: "1号仓库",
            x: "20%",
            y: 120,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "2号仓库",
            x: "40%",
            y: 120,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "3号仓库",
            x: "60%",
            y: 120,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "4号仓库",
            x: "80%",
            y: 120,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "5号仓库",
            x: "20%",
            y: 270,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "6号仓库",
            x: "40%",
            y: 270,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "7号仓库",
            x: "60%",
            y: 270,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
          {
            text: "8号仓库",
            x: "80%",
            y: 270,
            textAlign: "center",
            textStyle: {
              fontSize: "13",
              fontWeight: "100",
              color: "#b6b5b5",
              textAlign: "center",
            },
          },
        ],
        // 鼠标滑入提示
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["20%", "20%"], //此处为图形X轴相距数据
            color: this.waterDataColor,
            data: [this.data[0], { value: this.data[0], direction: "right" }], //第一个参数控制容器内满溢程度(最大为1)
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 }, //图内百分比值文本大小
            name: "1号仓库", //鼠标滑入提示文本
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
            waveAnimation: true, // 禁止左右波动
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["40%", "20%"],
            color: this.waterDataColor,
            data: [this.data[1], { value: this.data[1], direction: "left" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "2号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["60%", "20%"],
            color: this.waterDataColor,
            data: [this.data[2], { value: this.data[2], direction: "right" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "3号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["80%", "20%"],
            color: this.waterDataColor,
            data: [this.data[3], { value: this.data[3], direction: "left" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "4号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["20%", "70%"],
            color: this.waterDataColor,
            data: [this.data[4], { value: this.data[4], direction: "right" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "5号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["40%", "70%"],
            color: this.waterDataColor,
            data: [this.data[5], { value: this.data[5], direction: "left" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "6号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["60%", "70%"],
            color: this.waterDataColor,
            data: [this.data[6], { value: this.data[6], direction: "left" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "7号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
          {
            type: "liquidFill",
            radius: "37%",
            z: 6,
            center: ["80%", "70%"],
            color: this.waterDataColor,
            data: [this.data[7], { value: this.data[7], direction: "right" }],
            backgroundStyle: { borderWidth: 1 },
            label: { fontSize: 18 },
            name: "8号仓库",
            outline: {
              show: true,
              itemStyle: { borderWidth: 1, borderColor: this.waterDataColor[1] },
              borderDistance: 0,
            },
          },
        ],
      });
    },
  },
};
</script>