iep-ui/lib/chart/package/MultipleData/main.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _toolkits = require('../../../toolkits');

var _toolkits2 = _interopRequireDefault(_toolkits);

var _vueTypes = require('../../../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _isEmpty = require('lodash/isEmpty');

var _isEmpty2 = _interopRequireDefault(_isEmpty);

var _chunk = require('lodash/chunk');

var _chunk2 = _interopRequireDefault(_chunk);

var _map = require('lodash/map');

var _map2 = _interopRequireDefault(_map);

var _empty = require('../../../empty');

var _empty2 = _interopRequireDefault(_empty);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  name: 'IepMultipleData',
  components: {
    empty: _empty2['default']
  },
  props: {
    mode: _vueTypes2['default'].oneOf(['air', 'water']).def('air'),
    axis: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    time: _vueTypes2['default'].array.def(function () {
      return [];
    }),
    data: _vueTypes2['default'].object.def(function () {})
  },
  data: function data() {
    return {
      isEmpty: _isEmpty2['default'],
      airDict: _toolkits2['default'].pollutionFactors.factorDict.factor,
      airToColor: _toolkits2['default'].pollutionFactors.formatValueToColor,
      airTextColor: _toolkits2['default'].pollutionFactors.formatValueToFontColor,
      waterDict: _toolkits2['default'].waterLevel.waterDict.factor,
      waterToColor: _toolkits2['default'].waterLevel.formatWaterValueToColor,
      chart: null,
      watchData: null
    };
  },

  computed: {
    chartOptions: function chartOptions() {
      return {
        axis: this.axis,
        time: this.time,
        data: this.data
      };
    }
  },
  created: function created() {
    this.handleWindowResize = (0, _debounce2['default'])(this.handleWindowResize, 300);
  },
  mounted: function mounted() {
    var _this = this;

    window.addEventListener('resize', this.handleWindowResize);
    this.watchData = this.$watch('chartOptions', function (e) {
      if (!(0, _isEmpty2['default'])(e.axis) && !(0, _isEmpty2['default'])(e.time) && !(0, _isEmpty2['default'])(e.data)) {
        _this.renderChartView();
      }
    }, {
      immediate: true,
      deep: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
    this.watchData();
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },

  methods: {
    handleWindowResize: function handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    },
    formatAxisImg: function formatAxisImg(item) {
      var data = this.chartOptions.data[item];
      if (item === 'icon') {
        return {
          nameRotate: 0,
          nameTextStyle: {
            align: 'center',
            padding: 0,
            verticalAlign: 'middle',
            color: 'transparent',
            backgroundColor: {
              image: data[0].replace('svg', 'png')
            }
          }
        };
      } else if (item === 'windSpeed') {
        return {
          nameRotate: 0,
          nameTextStyle: {
            align: 'center',
            width: 19,
            padding: [100, 0, 0, 0],
            color: '#212121'
          }
        };
      } else if (item === 'windDirection') {
        return {
          nameRotate: this.calcWindSpeedIcon(data[0]),
          nameTextStyle: {
            color: 'transparent',
            align: 'center',
            padding: 0,
            verticalAlign: 'middle',
            backgroundColor: {
              image: '/image/windDirection.png'
            }
          }
        };
      } else {
        return {
          nameRotate: 0,
          nameTextStyle: {
            align: 'center',
            width: 14,
            height: 5,
            padding: [100, 0, 0, 0],
            color: '#0f6eff'
          }
        };
      }
    },
    lineFeed: function lineFeed(e) {
      return (0, _chunk2['default'])(e.split(''), 3).map(function (item) {
        return item.join('');
      }).map(function (item, index) {
        return index % 2 === 1 ? '\n' + item : item;
      }).join('');
    },
    formatAxisName: function formatAxisName(index, item) {
      var nowItem = this.chartOptions.data[item];
      return nowItem[nowItem.length - 1];
    },
    formatTooltipValue: function formatTooltipValue(e, index, data) {
      var item = data[index];
      if (item.seriesName === 'aqiMain' || item.seriesName === 'ciMain') {
        return item.data.name ? item.data.name : '';
      } else {
        return e;
      }
    },
    renderChartView: function renderChartView() {
      var _this2 = this;

      var height = this.$el.clientHeight;
      var len = this.chartOptions.axis.length;
      var gridItemHeight = height / len;
      var dom = this.$refs.chartDom;
      if ((0, _isEmpty2['default'])(dom) || !dom) {
        return false;
      }
      this.chart = _toolkits2['default'].echarts.init(dom);
      var options = {
        background: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function formatter(params) {
            var str = '<div style="display:flex;align-items: center;color: #999999;font-size: 14px">' + params[0].axisValue + '</div><br />';
            params.forEach(function (item, index) {
              str += '<div style="display:flex;align-items: center;font-size: 13px;"><span style="display: inline-block;width: 5px;height: 5px;border-radius: 100%;margin-right: 10px;background: ' + (item.color === 'transparent' ? 'rgb(13, 72, 165)' : item.color) + '">&nbsp;</span>' + (_this2.mode === 'air' ? _this2.airDict[item.seriesName].name : _this2.waterDict[item.seriesName].name) + ' : ' + _this2.formatTooltipValue(item.value, index, params) + ' ' + (_this2.mode === 'air' ? _this2.airDict[item.seriesName].unit : _this2.waterDict[item.seriesName].unit) + '</div>';
            });
            return str;
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' },
          label: {
            backgroundColor: '#777'
          },
          shadowStyle: {
            color: 'rgba(49,139,255,0.2)'
          }
        },
        xAxis: (0, _map2['default'])(this.chartOptions.axis, function (item, idx) {
          return {
            show: !idx,
            position: 'top',
            top: 10,
            gridIndex: idx,
            axisLabel: {
              color: '#212121'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            type: 'category',
            data: _this2.chartOptions.time
          };
        }),
        yAxis: [].concat((0, _toConsumableArray3['default'])((0, _map2['default'])(this.chartOptions.axis, function (item, idx) {
          return {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            nameGap: 10,
            nameLocation: 'middle',
            name: _this2.lineFeed(_this2.mode === 'air' ? _this2.airDict[item].name : _this2.waterDict[item].name),
            nameRotate: 0,
            gridIndex: idx,
            nameTextStyle: {
              padding: [0, 0, 0, 0],
              color: '#212121',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          };
        })), (0, _toConsumableArray3['default'])((0, _map2['default'])(this.chartOptions.axis, function (item, index) {
          return (0, _extends3['default'])({
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            nameLocation: 'center',
            name: _this2.formatAxisName(index, item),
            position: 'right',
            gridIndex: index,
            splitLine: {
              show: false
            }
          }, _this2.formatAxisImg(item));
        }))),
        grid: (0, _map2['default'])(this.chartOptions.axis, function (item, idx) {
          return {
            show: true,
            top: idx * gridItemHeight,
            height: gridItemHeight + 'px',
            left: 50,
            right: 30,
            bottom: 0,
            containLabel: true,
            backgroundColor: 'rgba(100, 123, 255, 0.27)',
            borderColor: 'transparent'
          };
        }),
        series: [].concat((0, _toConsumableArray3['default'])((0, _map2['default'])(this.chartOptions.axis, function (item, idx) {
          return {
            name: item,
            type: 'bar',
            smooth: true,
            itemStyle: {
              normal: {
                color: function color(params) {
                  var v = params.value;
                  var t = params.seriesName;
                  return _this2.mode === 'air' ? _this2.airToColor(v, t) : _this2.waterToColor(v, t);
                }
              }
            },
            label: {
              show: false,
              position: 'top',
              backgroundColor: 'rgba(0,0,0,0)',
              color: '#212121'
            },
            symbolSize: 3,
            xAxisIndex: idx,
            yAxisIndex: idx,
            showSymbol: false,
            data: _this2.chartOptions.data[item]
          };
        })), (0, _toConsumableArray3['default'])((0, _map2['default'])(this.chartOptions.axis, function (item, idx) {
          return {
            name: 0,
            type: 'line',
            inlineStyle: {
              color: 'transparent'
            },
            itemStyle: {
              color: 'transparent'
            },
            smooth: true,
            symbolSize: 3,
            xAxisIndex: idx,
            yAxisIndex: idx,
            showSymbol: false,
            data: []
          };
        })))
      };
      this.chart.setOption(this.chartOptions.time.length > 24 ? (0, _extends3['default'])(options, {
        dataZoom: [{
          type: 'slider',
          start: 0,
          end: 20,
          handleSize: 0,
          height: 10,
          left: 100,
          right: 100,
          bottom: 10,
          xAxisIndex: this.chartOptions.axis.map(function (item, index) {
            return index;
          }),
          borderRadius: 5,
          showDataShadow: false,
          showDetail: false,
          realtime: true,
          filterMode: 'filter'
        }, {
          type: 'inside',
          show: true,
          xAxisIndex: this.chartOptions.axis.map(function (item, index) {
            return index;
          }),
          start: 0,
          end: 20
        }]
      }) : options);
    }
  },
  render: function render() {
    var h = arguments[0];

    var chartNodes = h(
      'div',
      { 'class': 'iep-chart-core', ref: 'chartDom' },
      ['1']
    );
    return h(
      'div',
      { 'class': 'iep-chart' },
      [this.isEmpty(this.chartOptions.data) ? h(
        'div',
        { 'class': 'iep-chart-empty' },
        [h('empty')]
      ) : chartNodes]
    );
  }
};