iep-ui/es/bubble-chart/BubbleChart.js

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

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import ChartTemplate from '../chart-template';
import { mergeProps } from '../_util/props-util';
import { isEmpty, omit } from 'lodash';
export default {
  name: 'IepBubbleChart',
  props: mergeProps({
    data: PropTypes.object.def(function () {}),
    axis: PropTypes.array.def(function () {
      return [];
    }),
    unit: PropTypes.array.def(function () {
      return [];
    }),
    theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
    mixinOptions: PropTypes.object.def(function () {})
  }, ChartTemplate.props),
  data: function data() {
    return {
      chartOptions: {},
      themeColor: ['#0F6EFF', '#34D59B', '#FF9540', '#A36AFF', '#FFD240', '#80D8FF', '#FB4848', '#B8C32C', '#FF7BB8', '#82A8FF']
    };
  },

  computed: {
    factor: function factor() {
      var _$props = this.$props,
          data = _$props.data,
          axis = _$props.axis,
          loading = _$props.loading,
          theme = _$props.theme;

      return {
        data: data,
        axis: axis,
        loading: loading,
        theme: theme
      };
    }
  },
  watch: {
    factor: {
      handler: function handler(e) {
        var _$props2 = this.$props,
            theme = _$props2.theme,
            mixinOptions = _$props2.mixinOptions;

        this.chartOptions = _extends({}, omit(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), {
          theme: theme,
          loading: e.loading,
          options: _extends({
            // color: this.themeColor,
            tooltip: {
              show: false
            },
            title: _extends({
              text: e.data.name,
              subtext: e.data.value,
              left: 'center',
              align: 'center',
              top: 'middle',
              itemGap: 0,
              textStyle: {
                fontSize: 14,
                fontWeight: 400,
                color: theme === 'light' ? '#333' : '#fff',
                lineHeight: 30
              },
              subtextStyle: {
                color: theme === 'light' ? '#333' : '#fff',
                fontSize: 32,
                fontWeight: 'bold'
              }
            }, e.data.title),
            visualMap: {
              show: false,
              top: 'middle',
              right: 10,
              color: ['red', 'yellow'],
              calculable: true
            },
            grid: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            },
            series: [{
              type: 'liquidFill',
              color: ['rgba(255, 128, 0, 0.85)', 'rgba(255, 128, 0, 0.45)', 'rgba(255, 128, 0, 0.2)'],
              data: [0.4, 0.4, 0.4],
              itemStyle: {
                // opacity: 0.6,
                shadowBlur: 0,
                shadowColor: '#000'
              },
              center: e.data.center,
              radius: e.data.radius,
              amplitude: '6%',
              waveLength: '80%',
              phase: 'auto',
              period: 'auto',
              direction: 'right',
              shape: 'circle',
              label: {
                show: false
                // fontSize: 20,
                // fontWeight: 'bold',
                // color: theme === 'light' ? '#212121' : '#fff',
                // lineHeight: 30,
                // formatter: val => {
                //   return e.data.name ? `${e.data.name}\n${e.data.value}` : '';
                // },
              },
              backgroundStyle: {
                color: theme === 'light' ? '#fff' : '#212121'
              },
              outline: {
                show: true,
                borderDistance: 8,
                itemStyle: {
                  color: 'rgba(255, 128, 0, 1)',
                  borderColor: 'rgba(255, 128, 0, 1)',
                  borderWidth: 0,
                  shadowBlur: 0
                }
              },
              emphasis: {
                itemStyle: {
                  // opacity: 0.9,
                }
              }
            }]
          }, mixinOptions)
        });
      },

      immediate: true,
      deep: true
    }
  },
  render: function render() {
    var h = arguments[0];
    var chartOptions = this.chartOptions;

    if (!isEmpty(chartOptions)) {
      return h(ChartTemplate, { props: _extends({}, chartOptions) });
    } else {
      return h(ChartTemplate);
    }
  }
};