iep-ui/es/scatter-chart/ScatterChart.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: 'IepScatterChart',
  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 () {}),
    paramsName: PropTypes.array.def(function () {
      return [];
    })
  }, 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,
          paramsName = _$props.paramsName;

      return {
        data: data,
        axis: axis,
        loading: loading,
        theme: theme,
        paramsName: paramsName
      };
    }
  },
  watch: {
    factor: {
      handler: function handler(e) {
        var _this = this;

        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,
            grid: [{
              top: '16%',
              bottom: '6%',
              left: '6%',
              right: '6%',
              containLabel: true
            }],
            tooltip: {
              trigger: 'axis',
              // show:false,
              axisPointer: {
                type: 'cross'
              },
              formatter: function formatter(e) {
                return '';
              },
              borderColor: '#ccc'
            },
            xAxis: {
              type: 'value',
              name: this.formatName(this.paramsName[0]),
              nameLocation: 'end',
              nameTextStyle: {
                color: this.theme === 'light' ? '#000' : '#fff',
                fontSize: 14
              },
              axisLabel: {
                formatter: function formatter(e) {
                  return e + (_this.paramsName[0] === 'co' ? 'mg/m3' : 'ug/m3');
                }
              }
            },
            yAxis: {
              type: 'value',
              name: this.formatName(this.paramsName[1]),
              nameTextStyle: {
                color: this.theme === 'light' ? '#000' : '#fff',
                fontSize: 14
              },
              axisLabel: {
                formatter: function formatter(e) {
                  return e + (_this.paramsName[1] === 'co' ? 'mg/m3' : 'ug/m3');
                }
              }
            },
            series: [{
              name: e.data.name,
              symbolSize: 16,
              data: e.data.value,
              itemStyle: e.data.itemStyle,
              type: 'scatter',
              emphasis: {
                itemStyle: {
                  borderWidth: 16,
                  borderColor: 'rgba(255,0,0, 0.2)'
                }
              },
              markLine: e.data.markLineOpt
            }]
          }, mixinOptions)
        });
      },

      immediate: true,
      deep: true
    }
  },
  methods: {
    formatName: function formatName(e) {
      var enumSixParams = [{
        key: 'PM2.5',
        code: 'pm25'
      }, {
        key: 'PM10',
        code: 'pm10'
      }, {
        key: 'SO2',
        code: 'so2'
      }, {
        key: 'NO2',
        code: 'no2'
      }, {
        key: 'CO',
        code: 'co'
      }, {
        key: 'O3',
        code: 'o3'
      }, {
        key: 'VOC',
        code: 'voc'
      }, {
        key: 'TSP',
        code: 'tsp'
      }, {
        key: '温度',
        code: 'temperature'
      }, {
        key: '湿度',
        code: 'humidity'
      }, {
        key: '风向',
        code: 'windDirection'
      }];
      var index = enumSixParams.findIndex(function (item) {
        return item.code === (e === 'winddirection' ? 'windDirection' : e);
      });
      if (index > -1) {
        return enumSixParams[index].key;
      }
    }
  },
  render: function render() {
    var h = arguments[0];
    var chartOptions = this.chartOptions;

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