iep-ui/es/chart-template/main.js

An enterprise-class UI design language and Vue-based implementation

import toolkits from '../toolkits';
import PropTypes from '../_util/vue-types';
import { debounce, isEmpty, isFunction } from 'lodash';
import ResizeListener from 'element-resize-detector';
import Empty from '../empty';
import Spin from '../spin';

export default {
  name: 'IepChartTemplate',
  props: {
    options: PropTypes.object.def(function () {}),
    loading: PropTypes.bool.def(false),
    image: PropTypes.any,
    description: PropTypes.any,
    mixinFunc: PropTypes.func,
    imageStyle: PropTypes.object,
    events: PropTypes.object.def(function () {})
  },
  data: function data() {
    return {
      isEmpty: isEmpty,
      cachedOptions: {},
      chart: null
    };
  },
  created: function created() {
    this.handleWindowResize = debounce(this.handleWindowResize, 300);
  },

  computed: {
    chartOptions: function chartOptions() {
      return {
        mixinFunc: this.$props.mixinFunc,
        options: this.$props.options
      };
    }
  },
  watch: {
    chartOptions: {
      handler: function handler(val) {
        var _this = this;

        var mixinFunc = val.mixinFunc,
            options = val.options;

        if (!isEmpty(options)) {
          this.cachedOptions = isFunction(mixinFunc) ? mixinFunc(options) : options;
          this.$nextTick(function () {
            if (_this.chart) {
              _this.chart.clear();
            }
            _this.renderChartView();
          });
        }
      },

      immediate: true,
      deep: true
    }
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },

  methods: {
    handleWindowResize: function handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    },
    addChartResizeListener: function addChartResizeListener() {
      var _this2 = this;

      var instance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });

      instance.listenTo(this.$el, function () {
        if (!_this2.chart) return;
        _this2.chart.resize();
      });
    },
    renderChartView: function renderChartView() {
      var _this3 = this;

      this.chart = toolkits.echarts.init(this.$refs.chartDom);

      this.chart.setOption(this.cachedOptions);
      this.chart.on('finished', function () {
        _this3.$emit('load', _this3.chart, toolkits.echarts);
      });
      if (!isEmpty(this.events)) {
        Object.keys(this.events).map(function (e) {
          _this3.chart.off(e);
          _this3.chart.on(e, _this3.events[e]);
        });
      }
    },
    getInstance: function getInstance() {
      return this.chart;
    },
    getInstanceDom: function getInstanceDom() {
      return this.$refs.chartDom;
    }
  },
  render: function render() {
    var h = arguments[0];
    var _$props = this.$props,
        imageStyle = _$props.imageStyle,
        image = _$props.image,
        description = _$props.description,
        loading = _$props.loading,
        options = _$props.options;

    var emptyProps = {
      imageStyle: imageStyle,
      image: image,
      description: description
    };
    var chartNodes = h('div', { 'class': 'iep-chart-core-inner', ref: 'chartDom' });
    return h(
      'div',
      { 'class': 'iep-chart' },
      [isEmpty(options) ? h(
        'div',
        { 'class': 'iep-chart-empty' },
        [h(Empty, { props: emptyProps })]
      ) : null, loading ? h(
        'div',
        { 'class': 'iep-chart-loading' },
        [h(Spin, {
          attrs: { spinning: loading }
        })]
      ) : null, h(
        'div',
        { 'class': 'iep-chart-core' },
        [chartNodes]
      )]
    );
  }
};