vue封装的可配置水球图组件

前言

基于 echarts-liquidfill 开发的适用于大屏可视化的水球图组件，根据传入的数值决定水球图水量高度，可定义水球图的三条水波纹的颜色色值、水球图的背景颜色、边框颜色以及外发光阴影的颜色等属性。

1. 引入echart、echarts-liquidfill 包

• cnpm i echart echarts-liquidfill element-resize-detector -S

2. 组件的属性定义和数据定义

• 每个属性都给了一个默认值，这样即使引入水球图组件不传属性时也能展示一个默认的水球图图表

data() {
    return {
      option: null,
      chart: null
    };
  },
  props: {
    data: {
      type: Number,
      default: 0.52
    },
    colors: {
      type: Array,
      default: () => ['rgba(14, 71, 120, 1)', 'rgba(58, 160, 235, 1)', 'rgba(107, 211, 253, 1)']
    },
    backgroundColor: {
      type: String,
      default: 'rgba(2, 31, 64, 1)'
    },
    borderColor: {
      type: String,
      default: 'rgba(27, 114, 177, 1)'
    },
    shadowColor: {
      type: String,
      default: 'rgba(107, 211, 253, 1)'
    },
    radius: {
      type: String,
      default: '47%'
    }
  },

3. 水球图的初始化以及元素尺寸监听

• this.$el 当前元素对象
• 在mounted生命周期中初始化水球图图表后进行当前元素的容器尺寸的监听

const dataArr = [this.data, this.data, this.data];
    this.option = {
      title: {
        show: true,
        text: this.data * 100 + '%',
        textStyle: {
          fontSize: 23,
          fontFamily: 'Microsoft Yahei',
          fontWeight: 'normal',
          color: '#fff'
        },
        x: '30%',
        y: '45%'
      },
      series: [
        {
          type: 'liquidFill',
          radius: this.radius,
          center: ['50%', '53%'],
          // shape: 'roundRect',
          data: dataArr,
          color: this.colors,
          backgroundStyle: {
            color: this.backgroundColor
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 3,
              borderColor: this.borderColor,
              shadowBlur: 15,
              shadowColor: this.shadowColor
            }
          },
          label: {
            normal: {
              formatter: ''
            }
          }
        }
      ]
    };
    this.chart = echarts.init(this.$el);
    this.chart.setOption(this.option);
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();

4. element-resize-detector 做 echart动态适配

methods: {
    /**
     * 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
     */
    addChartResizeListener() {
      const instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, () => {
        if (!this.chart) return;
        this.chart.resize();
      });
    },
    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  },

5. 水球图的数据监听更新

• 当传入组件的data数据改变之后，图表是不能自动更新的，这个时候我们需要监听echart图表，手动去更新

watch: {
    data(newVal) {
      this.option.series[0].data = newVal;
      // 更新之前先清空图表 不然会有数字重叠的问题
      this.chart.clear();
      this.chart.setOption(this.option, true);
      this.handleItemMouseover(0);
    }
  }

6. 调用组件方式

<liquid-chart
  radius="60%"
  :data="21.8"
  :colors="['rgba(1, 105, 110, 1)', 'rgba(65, 233, 204, 1)', 'rgba(0, 217, 180, 1)']"
  borderColor="rgba(32, 170, 149, 1)"
  shadowColor="rgba(0, 217, 180, 1)">
</liquid-chart>

7. 完整组件代码

<template>
  <div class="liquid-chart"></div>
</template>

<script>
import echarts from 'echarts';
import 'echarts-liquidfill';
import ResizeListener from 'element-resize-detector';
export default {
  name: 'Liquid-Chart',
  data() {
    return {
      option: null,
      chart: null
    };
  },
  props: {
    data: {
      type: Number,
      default: 0.52
    },
    colors: {
      type: Array,
      default: () => ['rgba(14, 71, 120, 1)', 'rgba(58, 160, 235, 1)', 'rgba(107, 211, 253, 1)']
    },
    backgroundColor: {
      type: String,
      default: 'rgba(2, 31, 64, 1)'
    },
    borderColor: {
      type: String,
      default: 'rgba(27, 114, 177, 1)'
    },
    shadowColor: {
      type: String,
      default: 'rgba(107, 211, 253, 1)'
    },
    radius: {
      type: String,
      default: '47%'
    }
  },
  mounted() {
    const dataArr = [this.data, this.data, this.data];
    this.option = {
      title: {
        show: true,
        text: this.data * 100 + '%',
        textStyle: {
          fontSize: 23,
          fontFamily: 'Microsoft Yahei',
          fontWeight: 'normal',
          color: '#fff'
        },
        x: '30%',
        y: '45%'
      },
      series: [
        {
          type: 'liquidFill',
          radius: this.radius,
          center: ['50%', '53%'],
          // shape: 'roundRect',
          data: dataArr,
          color: this.colors,
          backgroundStyle: {
            color: this.backgroundColor
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 3,
              borderColor: this.borderColor,
              shadowBlur: 15,
              shadowColor: this.shadowColor
            }
          },
          label: {
            normal: {
              formatter: ''
            }
          }
        }
      ]
    };
    this.chart = echarts.init(this.$el);
    this.chart.setOption(this.option);
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
  },
  methods: {
    /**
     * 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
     */
    addChartResizeListener() {
      const instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, () => {
        if (!this.chart) return;
        this.chart.resize();
      });
    },
    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    }
  },
  watch: {
    data(newVal) {
      this.option.series[0].data = newVal;
      // 更新之前先清空图表 不然会有数字重叠的问题
      this.chart.clear();
      this.chart.setOption(this.option, true);
      this.handleItemMouseover(0);
    }
  }
};
</script>

<style lang="scss" scoped>
.liquid-chart {
  width: 100%;
  height: 100%;
}
</style>