iep-ui 1.4.20 → 1.4.21

package/es/multiple-data/main.js

@@ -0,0 +1,1333 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
+import toolkits from '../toolkits';
+import PropTypes from '../_util/vue-types';
+import isEmpty from 'lodash/isEmpty';
+import chunk from 'lodash/chunk';
+import map from 'lodash/map';
+import empty from '../empty';
+import debounce from 'lodash/debounce';
+import { MAIN, WARN, WIND } from './enum';
+import { filter, first, isArray, last, omit, subtract, sum, isEqual, flatten, intersection } from 'lodash';
+import Vue from 'vue';
+import Tooltip from './tooltip';
+import SingleLine from './singleLine';
+
+export default {
+  name: 'IepMultipleData',
+  components: {
+    empty: empty,
+    SingleLine: SingleLine
+  },
+  props: {
+    mode: PropTypes.oneOf(['air', 'water']).def('air'),
+    theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
+    currentText: PropTypes.string.def('实时'),
+    axis: PropTypes.array.def(function () {
+      return [];
+    }),
+    time: PropTypes.array.def(function () {
+      return [];
+    }),
+    event: PropTypes.array.def(function () {
+      return [];
+    }),
+    data: PropTypes.any,
+    markerData: PropTypes.any,
+    isTruncate: PropTypes.bool.def(true),
+    textTruncateNumber: PropTypes.number.def(4),
+    image: PropTypes.any,
+    description: PropTypes.any,
+    imageStyle: PropTypes.object,
+    closeReal: PropTypes.bool.def(false),
+    scrollEnd: PropTypes.bool.def(false),
+    textColor: PropTypes.string,
+    chartType: PropTypes.oneOf(['bar', 'line']),
+    isInteraction: PropTypes.bool.def(false), // 联动图
+    isExpand: PropTypes.bool.def(false) // 展开图
+  },
+  data: function data() {
+    return {
+      isEmpty: isEmpty,
+      airToColor: toolkits.pollutionFactors.formatValueToColor,
+      airTextColor: toolkits.pollutionFactors.formatValueToFontColor,
+      waterToColor: toolkits.waterLevel.formatWaterValueToColor,
+      chart: null,
+      watchData: null,
+      multiAqiMain: false,
+      ignoreTag: ['windLevel'],
+      rightLegend: {
+        labelHeight: 0,
+        axis: [],
+        height: 0,
+        labelWrapperHeight: 0,
+        labelGapHeight: 0
+      },
+      // chartType: 'bar',
+      params6NameTooltipShow: false,
+      currentParams: 'aqi',
+      // 联动图使用
+      current6Params: 'aqi',
+      currentOtherParams: 'windLevel',
+      minWidth: 400,
+      rows: 0
+    };
+  },
+
+  computed: {
+    chartTypeClone: function chartTypeClone() {
+      return this.chartType || 'bar';
+    },
+    chartOptions: function chartOptions() {
+      return {
+        axis: !isEmpty(this.time) ? this.chartTypeClone === 'bar' ? ['fixed_axis'].concat(_toConsumableArray(this.axis.filter(function (item) {
+          return item !== 'aqiMain';
+        }))) : this.axis.filter(function (item) {
+          return item !== 'aqiMain' && item !== 'weather';
+        }) : [],
+        aqiMain: !isEmpty(this.data) && !isEmpty(this.data.aqiMain) ? this.data.aqiMain : [],
+        time: this.time,
+        event: this.event,
+        markerData: this.markerData,
+        data: !isEmpty(this.time) ? this.chartTypeClone === 'bar' ? _extends({
+          fixed_axis: []
+        }, omit(this.data, ['aqiMain'])) : omit(this.data, ['aqiMain', 'weather']) : {}
+      };
+    },
+    params6: function params6() {
+      if (this.mode === 'water') {
+        return intersection(['waterLevel', 'cod', 'nh3n', 'tp', 'tn', 'dissolvedOxygen', 'codMn'], this.$props.axis);
+      }
+      return intersection(['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'], this.$props.axis);
+    },
+    params6Item: function params6Item() {
+      var factor = this.mode === 'air' ? toolkits.pollutionFactors.factorDict.factor : toolkits.waterLevel.waterDict.factor;
+      var obj = [];
+      map(filter(this.params6, function (e) {
+        return e !== 'co';
+      }), function (e) {
+        obj[e] = factor[e];
+      });
+      return obj;
+    },
+    lineTextColor: function lineTextColor() {
+      return !isEmpty(this.textColor) ? this.textColor : this.theme === 'dark' ? '#ccc' : '#666';
+    },
+
+    // 联动图使用
+    omitParams6Link: function omitParams6Link() {
+      var _this = this;
+
+      var baseOmit = this.axis.filter(function (item) {
+        return _this.params6.indexOf(item) === -1 && item !== 'aqiMain' && item !== 'weather' && item !== 'windDirection' && item !== 'windLevel';
+      });
+      var wind = this.axis.filter(function (item) {
+        return item === 'windDirection' || item === 'windLevel';
+      });
+      if (wind.length) baseOmit.push(wind);
+      return baseOmit;
+    },
+
+    // 展开图使用
+    omitAqiMainAndDir: function omitAqiMainAndDir() {
+      var baseOmit = this.axis.filter(function (item) {
+        return item !== 'aqiMain' && item !== 'weather' && item !== 'windDirection' && item !== 'windLevel';
+      });
+      var wind = this.axis.filter(function (item) {
+        return item === 'windDirection' || item === 'windLevel';
+      });
+      if (wind.length) baseOmit.push(wind);
+      return baseOmit;
+    }
+  },
+  created: function created() {
+    this.handleWindowResize = debounce(this.handleWindowResize, 300);
+  },
+  mounted: function mounted() {
+    var _this2 = this;
+
+    window.addEventListener('resize', this.handleWindowResize);
+    // this.$el.onclick =() => this.params6NameTooltipShow = false;
+    this.watchData = this.$watch('chartOptions', function (e) {
+      if (!isEmpty(e.axis) && !isEmpty(e.time) && !isEmpty(e.data)) {
+        if (_this2.chart) {
+          _this2.chart.clear();
+        }
+        // 折线图默认选中的值
+        if (_this2.params6.length) {
+          _this2.currentParams = _this2.params6[0];
+        } else {
+          _this2.currentParams = _this2.axis[0];
+        }
+        // 联动图
+        if (_this2.isInteraction) {
+          _this2.current6Params = _this2.params6.length ? _this2.params6[0] : '';
+          _this2.currentOtherParams = _this2.omitParams6Link.length ? _this2.omitParams6Link[0] : '';
+        }
+        _this2.renderChartView();
+      } else {
+        if (_this2.chart) {
+          _this2.chart.clear();
+        }
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    window.removeEventListener('resize', this.handleWindowResize);
+    this.watchData();
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  },
+
+  methods: {
+    // 文字换行
+    lineWord: function lineWord(e) {
+      return this.$props.isTruncate ? e ? e.length > this.$props.textTruncateNumber ? e.substr(0, this.$props.textTruncateNumber) + '...' : e : '' : /.*[\u4e00-\u9fa5]+.*$/.test(e) ? chunk(e.split(''), 4).map(function (item) {
+        return item.join('');
+      }).map(function (item, index) {
+        return index % 2 === 1 ? '\n' + item : item;
+      }).join('') : e;
+    },
+    getDict: function getDict(data, params, mode) {
+      var airDict = toolkits.pollutionFactors.factorDict.factor;
+      var waterDict = toolkits.waterLevel.waterDict.factor;
+      if (mode === 'air') {
+        return airDict[data] && airDict[data][params] ? airDict[data][params] : '';
+      } else {
+        return waterDict[data] && waterDict[data][params] ? waterDict[data][params] : '';
+      }
+    },
+    handleWindowResize: function handleWindowResize() {
+      if (!this.chart) return;
+      this.chart.resize();
+    },
+    getIndex: function getIndex(e) {
+      return this.time.findIndex(function (item) {
+        return item === e;
+      });
+    },
+    renderChartView: function renderChartView() {
+      var _this3 = this;
+
+      this.params6NameTooltipShow = false;
+      // 展开图
+      if (this.isExpand) {
+        var gridNum = Math.floor(this.$refs['iep-mutiple-chart'].offsetWidth / this.minWidth);
+        this.rows = Math.ceil(this.omitAqiMainAndDir.length / gridNum);
+        return;
+      }
+      var dom = this.$refs.chartDom;
+      if (isEmpty(dom) || !dom) {
+        return false;
+      }
+      if (!isEmpty(this.chart)) {
+        this.chart.dispose(); //销毁
+      }
+      this.chart = toolkits.echarts.init(dom, { renderer: 'svg' });
+      this.chart.on('click', this.mouseoverYaxisName);
+      this.chart.getZr().on('click', function (e) {
+        if (!e.target) _this3.params6NameTooltipShow = false;
+      });
+      var theme = this.$props.theme;
+
+      var factor = this.mode === 'air' ? toolkits.pollutionFactors.factorDict.factor : toolkits.waterLevel.waterDict.factor;
+      // 联动图
+      if (this.isInteraction) {
+        var _tooltip = {
+          trigger: 'axis',
+          appendToBody: true,
+          enterable: true,
+          confine: true,
+          'class': 'tooltip-multiple-wrapper tooltip-multiple-' + theme,
+          backgroundColor: 'transparent',
+          borderColor: 'transparent',
+          padding: 0,
+          formatter: function formatter(params) {
+            var data = {
+              title: params[0].axisValue,
+              mode: _this3.mode,
+              list: params.map(function (item) {
+                return {
+                  text: item.seriesName + factor[item.name].name,
+                  name: item.name,
+                  value: item.value,
+                  icon: item.name === 'weather' ? _this3.$props.data[item.axisIndex].data[item.name][item.dataIndex] : '',
+                  color: item.color,
+                  unit: factor[item.name].unit,
+                  rotate: item.name === 'windDirection' ? _this3.$props.data[item.axisIndex].data[item.name][item.dataIndex] : '',
+                  key: item.dataIndex
+                };
+              })
+            };
+            return new Vue({
+              render: function render(h) {
+                return h(Tooltip, {
+                  props: {
+                    chartData: data,
+                    theme: theme
+                  }
+                });
+              }
+            }).$mount().$el;
+          }
+        };
+        var gridWidth = this.$el.clientWidth * (1 - (0.05 + 0.05));
+        var barWidth = 60;
+        var srollLen = Math.floor(gridWidth / barWidth);
+        var end = Math.floor(srollLen / this.$props.time.length * 100);
+        var start = this.scrollEnd ? 100 - end : 0;
+        end = this.scrollEnd ? 100 : end;
+        var dataZoom = [{
+          type: 'slider',
+          start: start,
+          end: end,
+          height: 10,
+          left: '5%',
+          right: '5%',
+          bottom: '3%',
+          xAxisIndex: [0, 1]
+        }];
+        var grid = this.omitParams6Link.length ? [{
+          left: '5%',
+          right: '5%',
+          top: '15%',
+          height: '30%'
+        }, {
+          left: '5%',
+          right: '5%',
+          top: '59%',
+          height: '30%'
+        }] : [{
+          left: '5%',
+          right: '5%',
+          top: '15%'
+        }];
+        var xAxis = this.omitParams6Link.length ? [{
+          type: 'category',
+          gridIndex: 0,
+          data: this.$props.time,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          boundaryGap: false
+        }, {
+          type: 'category',
+          gridIndex: 1,
+          data: this.$props.time,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          boundaryGap: false
+        }] : [{
+          type: 'category',
+          gridIndex: 0,
+          data: this.$props.time,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          boundaryGap: false
+        }];
+        var yAxis = this.omitParams6Link.length ? [{
+          type: 'value',
+          gridIndex: 0,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          splitLine: {}
+        }, {
+          type: 'value',
+          gridIndex: 1,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          splitLine: {}
+        }] : [{
+          type: 'value',
+          gridIndex: 0,
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          splitLine: {}
+        }];
+        var series = this.omitParams6Link.length ? this.$props.data.map(function (item) {
+          return {
+            type: 'line',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            name: item.name,
+            data: item.data[_this3.current6Params].map(function (e) {
+              return {
+                name: _this3.current6Params,
+                value: e
+              };
+            })
+          };
+        }).concat(flatten(this.$props.data.map(function (item) {
+          if (Array.isArray(_this3.currentOtherParams)) {
+            return _this3.currentOtherParams.map(function (e) {
+              return {
+                type: 'line',
+                xAxisIndex: 1,
+                yAxisIndex: 1,
+                lineStyle: {
+                  width: e === 'windDirection' ? 0 : 2
+                },
+                symbolSize: 3,
+                name: item.name,
+                data: e === 'windDirection' ? item.data[e].map(function (a, index) {
+                  return {
+                    name: e,
+                    value: _this3.currentOtherParams.includes('windLevel') ? item.data['windLevel'][index] : 0,
+                    symbolSize: 0,
+                    label: {
+                      show: true,
+                      width: 15,
+                      height: 15,
+                      distance: 0,
+                      rotate: a,
+                      color: 'rgba(0,0,0,0)',
+                      verticalAlign: 'middle',
+                      zlevel: 10,
+                      backgroundColor: {
+                        image: WIND
+                      }
+                    }
+                  };
+                }) : item.data[e].map(function (a) {
+                  return {
+                    name: e,
+                    value: a,
+                    symbol: _this3.currentOtherParams.includes('windDirection') ? 'none' : 'emptyCircle'
+                  };
+                })
+              };
+            });
+          } else {
+            return {
+              type: 'line',
+              xAxisIndex: 1,
+              yAxisIndex: 1,
+              lineStyle: {
+                width: _this3.currentOtherParams === 'windDirection' ? 0 : 2
+              },
+              symbolSize: 3,
+              name: item.name,
+              data: _this3.currentOtherParams === 'windLevel' ? item.data[_this3.currentOtherParams].map(function (e, index) {
+                if (_this3.$props.axis.includes('windDirection')) {
+                  return {
+                    name: _this3.currentOtherParams,
+                    value: e,
+                    symbolSize: 0,
+                    label: {
+                      show: true,
+                      width: 15,
+                      height: 15,
+                      distance: 0,
+                      rotate: item.data['windDirection'][index],
+                      color: 'rgba(0,0,0,0)',
+                      verticalAlign: 'middle',
+                      zlevel: 10,
+                      backgroundColor: {
+                        image: WIND
+                      }
+                    }
+                  };
+                } else {
+                  return {
+                    name: _this3.currentOtherParams,
+                    value: e
+                  };
+                }
+              }) : item.data[_this3.currentOtherParams].map(function (e) {
+                return {
+                  name: _this3.currentOtherParams,
+                  value: e
+                };
+              })
+            };
+          }
+        }))) : this.$props.data.map(function (item) {
+          return {
+            type: 'line',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            name: item.name,
+            data: item.data[_this3.current6Params].map(function (e) {
+              return {
+                name: _this3.current6Params,
+                value: e
+              };
+            })
+          };
+        });
+        var options = {
+          axisPointer: {
+            link: { xAxisIndex: 'all' }
+          },
+          tooltip: _tooltip,
+          legend: {
+            type: 'scroll',
+            top: '2%',
+            textStyle: {
+              color: this.lineTextColor
+            },
+            pageTextStyle: {
+              color: this.lineTextColor
+            },
+            icon: 'path://M2171.083,290H2167a1,1,0,1,1,0-2h4.083a6,6,0,0,1,11.834,0H2187a1,1,0,1,1,0,2h-4.083a6,6,0,0,1-11.834,0Zm1.917-1a4,4,0,1,0,4-4A4,4,0,0,0,2173,289Z',
+            data: this.$props.data.map(function (item) {
+              return item.name;
+            })
+          },
+          grid: grid,
+          xAxis: xAxis,
+          yAxis: yAxis,
+          series: series
+        };
+        this.chart.setOption(this.$props.time.length > 20 ? _extends(options, {
+          dataZoom: dataZoom
+        }) : options);
+        return;
+      }
+      var tooltip = {
+        trigger: 'axis',
+        appendToBody: true,
+        enterable: true,
+        confine: true,
+        'class': 'tooltip-multiple-wrapper tooltip-multiple-' + theme,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        padding: 0,
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function formatter(params) {
+          var data = {
+            title: params[0].axisValue,
+            mode: _this3.mode,
+            list: params.map(function (item) {
+              return {
+                text: factor[item.seriesName].name,
+                name: item.seriesName,
+                value: item.seriesName === 'windLevel' ? _this3.chartOptions.data['windLevel'][item.dataIndex] : item.value,
+                icon: item.seriesName === 'weather' ? item.data.label.backgroundColor.image : '',
+                color: item.color,
+                unit: factor[item.seriesName].unit,
+                rotate: item.seriesName === 'windDirection' ? item.data.label.rotate : '',
+                key: item.dataIndex,
+                mark: item.data.mark,
+                event: _this3.chartOptions.event[item.dataIndex] ? factor[_this3.chartOptions.event[item.dataIndex]].name : ''
+              };
+            })
+          };
+          // console.log(data);
+          return new Vue({
+            render: function render(h) {
+              return h(Tooltip, {
+                props: {
+                  chartData: data,
+                  theme: theme
+                }
+              });
+            }
+          }).$mount().$el;
+        }
+      };
+      // 柱状图
+      if (this.chartTypeClone === 'bar') {
+        // console.log(this.$el.clientWidth, '容器宽度');
+        var lineBarButtonsHeight = this.$el.querySelector('.line-bar-buttons') ? this.$el.querySelector('.line-bar-buttons').clientHeight + 10 : 0;
+        var _gridWidth = this.$el.clientWidth - 56 - 50;
+        var barMinWidth = 15;
+        var barMaxWidth = 60;
+        var _srollLen = Math.floor(_gridWidth / (barMinWidth + 2));
+        var _end = Math.floor(_srollLen / this.chartOptions.time.length * 100);
+        var _start = this.scrollEnd ? 100 - _end : 0;
+        _end = this.scrollEnd ? 100 : _end;
+        var height = this.$el.clientHeight - lineBarButtonsHeight - 20;
+        if (this.chartOptions.time.length > _srollLen) {
+          // 横坐标和缩放轴都假定20高
+          height -= 20;
+        }
+        var len = this.chartOptions.axis.length - 1;
+        var gridItemHeight = height / len;
+        // 在1300 - 1800容器里
+        var mainRich = {};
+        if (!isEmpty(this.chartOptions.aqiMain) && !isEmpty(this.chartOptions.time)) {
+          this.multiAqiMain = this.chartOptions.aqiMain.every(function (item) {
+            return isArray(item);
+          });
+          if (this.multiAqiMain) {
+            this.chartOptions.time.forEach(function (_, index) {
+              var item = _this3.chartOptions.aqiMain[index];
+              if (!isEmpty(item)) {
+                item.forEach(function (cItem, _) {
+                  if (!isEmpty(cItem) && cItem !== '-' && cItem !== '') {
+                    var axisIndex = _this3.chartOptions.axis.findIndex(function (e) {
+                      return e === cItem;
+                    });
+                    mainRich[('' + cItem.toUpperCase() + axisIndex + index).replace('.', '')] = {
+                      backgroundColor: {
+                        image: MAIN
+                      },
+                      width: 16,
+                      height: 16
+                    };
+                  }
+                });
+              }
+            });
+          } else {
+            this.chartOptions.aqiMain.forEach(function (item, index) {
+              if (!isEmpty(item) && item !== '-' && item !== '') {
+                mainRich[('' + item.toUpperCase() + index).replace('.', '')] = {
+                  backgroundColor: {
+                    image: MAIN
+                  },
+                  width: 16,
+                  height: 16
+                };
+              }
+            });
+          }
+        }
+        var _yAxis = [].concat(_toConsumableArray(map(this.chartOptions.axis, function (item, idx) {
+          return {
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            nameGap: 50,
+            nameLocation: 'middle',
+            name: _this3.lineWord(_this3.getDict(item, 'name', _this3.mode)),
+            nameRotate: 0,
+            gridIndex: idx,
+            nameTextStyle: {
+              align: 'left',
+              color: _this3.lineTextColor,
+              fontSize: 12
+            },
+            splitLine: {
+              show: false
+            }
+          };
+        })));
+        if (!this.$props.closeReal) {
+          _yAxis = [].concat(_toConsumableArray(_yAxis), _toConsumableArray(map(this.chartOptions.axis, function (item, index) {
+            return {
+              zlevel: 10,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              // nameRotate: 50,
+              nameRotate: _this3.formatRealYaxisNameRotate(item),
+              nameLocation: 'middle',
+              name: '' + (index === 0 ? _this3.$props.currentText : _this3.formatYaxisName(item, index, _this3.$props.isTruncate)),
+              nameTextStyle: _this3.formatRealYaxisName(item, gridItemHeight, false),
+              position: 'right',
+              gridIndex: index,
+              splitLine: {
+                show: false
+              }
+            };
+          })));
+        }
+        var _options = {
+          background: 'transparent',
+          axisPointer: {
+            link: { xAxisIndex: 'all' },
+            label: {
+              backgroundColor: '#777'
+            },
+            shadowStyle: {
+              color: 'rgba(49,139,255,0.2)'
+            }
+          },
+          barMaxWidth: barMaxWidth,
+          barMinWidth: barMinWidth,
+          tooltip: tooltip,
+          xAxis: map(this.chartOptions.axis, function (item, idx) {
+            return idx === 0 ? {
+              show: true,
+              position: 'top',
+              top: 0,
+              gridIndex: idx,
+              axisLabel: {
+                color: _this3.lineTextColor,
+                margin: 0
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              type: 'category',
+              data: _this3.chartOptions.time
+            } : {
+              show: true,
+              position: 'bottom',
+              gridIndex: idx,
+              axisLabel: {
+                margin: 0,
+                interval: 0,
+                color: 'rgba(0,0,0,0)',
+                width: 10,
+                height: 10,
+                formatter: function formatter(e) {
+                  if (_this3.multiAqiMain) {
+                    if (idx !== 0) {
+                      return '{' + item.toUpperCase() + idx + _this3.getIndex(e) + '|0}';
+                    }
+                  } else {
+                    return idx === 0 ? '' : '{' + item.toUpperCase() + _this3.getIndex(e) + '|0}';
+                  }
+                },
+                rich: mainRich
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              type: 'category',
+              data: _this3.chartOptions.time
+            };
+          }),
+          yAxis: _yAxis,
+          grid: map(this.chartOptions.axis, function (item, idx) {
+            return {
+              show: true,
+              top: idx === 0 ? 0 : (idx - 1) * gridItemHeight + 20,
+              height: idx === 0 ? 0 : gridItemHeight,
+              left: 56,
+              right: 50,
+              bottom: 0,
+              containLabel: true,
+              backgroundColor: idx === 0 ? 'transparent' : 'rgba(100, 123, 255, 0.1)',
+              borderColor: 'transparent'
+            };
+          }),
+          series: this.formatSeries()
+        };
+        this.chart.setOption(this.chartOptions.time.length > _srollLen ? _extends(_options, {
+          dataZoom: [{
+            type: 'slider',
+            start: _start,
+            end: _end,
+            height: 10,
+            left: 100,
+            right: 100,
+            bottom: 10,
+            xAxisIndex: this.chartOptions.axis.map(function (item, index) {
+              return index;
+            })
+          }]
+        }) : _options);
+      }
+      // 折线图
+      if (this.chartTypeClone === 'line') {
+        var includes6Params = this.chartOptions.axis.filter(function (e) {
+          return _this3.params6.includes(e);
+        });
+        var includesCO = this.chartOptions.axis.filter(function (e) {
+          return e === 'co';
+        });
+        // 去除六参和co的参数
+        var omit6Params = this.chartOptions.axis.filter(function (e) {
+          return !_this3.params6.includes(e);
+        });
+        var omit6ParamsAndWindD = this.chartOptions.axis.includes('windDirection') && this.chartOptions.axis.includes('windLevel') ? omit6Params.filter(function (e) {
+          return e !== 'windDirection';
+        }) : omit6Params;
+        var yAxis1 = [],
+            yAxisCO = [];
+        includes6Params.length && (yAxis1 = [{
+          key: 'params6',
+          name: this.formatLineYaxisName(this.params6Item[this.currentParams].name).indexOf('...') > -1 ? this.formatLineYaxisName(this.params6Item[this.currentParams].name) : this.formatLineYaxisName(this.params6Item[this.currentParams].name) + '...',
+          position: 'left',
+          offset: omit6ParamsAndWindD.length * this.$el.offsetWidth * 0.026,
+          nameTextStyle: {
+            color: this.theme === 'dark' ? '#7a94fb' : 'blue'
+          },
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: this.lineTextColor
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: this.theme === 'dark' ? '#333' : '#ccc'
+            }
+          },
+          triggerEvent: true
+        }]);
+        includesCO.length && (yAxisCO = [{
+          key: 'co',
+          name: this.formatLineYaxisName(factor['co'].name),
+          position: 'right',
+          nameTextStyle: {
+            color: this.lineTextColor
+          },
+          axisLabel: {
+            color: this.lineTextColor
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: this.lineTextColor
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        }]);
+        var _yAxis2 = [].concat(_toConsumableArray(yAxis1), _toConsumableArray(map(omit6ParamsAndWindD, function (item, idx) {
+          return {
+            key: item,
+            name: _this3.formatLineYaxisName(factor[item].name),
+            position: 'left',
+            offset: _this3.$el.offsetWidth * idx * 0.026,
+            nameTextStyle: {
+              color: _this3.lineTextColor
+            },
+            axisLabel: {
+              color: _this3.lineTextColor
+            },
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: _this3.lineTextColor
+              }
+            }
+          };
+        })), _toConsumableArray(yAxisCO));
+        var hideParams = this.params6.filter(function (e) {
+          return e !== _this3.currentParams && e !== 'co';
+        });
+        var seriesData = filter(this.chartOptions.axis, function (e) {
+          return hideParams.indexOf(e) === -1;
+        });
+        var _gridWidth2 = this.$el.clientWidth * (1 - (omit6ParamsAndWindD.length * 0.026 + 0.05 + 0.05));
+        var _barWidth = 60;
+        var _srollLen2 = Math.floor(_gridWidth2 / _barWidth);
+        var _end2 = Math.floor(_srollLen2 / this.chartOptions.time.length * 100);
+        var _start2 = this.scrollEnd ? 100 - _end2 : 0;
+        _end2 = this.scrollEnd ? 100 : _end2;
+        var _dataZoom = [{
+          type: 'slider',
+          start: _start2,
+          end: _end2,
+          height: 10,
+          left: (omit6ParamsAndWindD.length * 0.026 + 0.05) * this.$el.offsetWidth,
+          right: '5%',
+          bottom: '5%',
+          xAxisIndex: this.chartOptions.axis.map(function (item, index) {
+            return index;
+          })
+        }];
+        var _options2 = {
+          grid: {
+            top: '15%',
+            left: (omit6ParamsAndWindD.length * 0.026 + 0.05) * this.$el.offsetWidth,
+            right: '5%'
+          },
+          legend: {
+            type: 'scroll',
+            top: '3%',
+            formatter: function formatter(e) {
+              return factor[e].name;
+            },
+
+            textStyle: {
+              color: this.lineTextColor
+            },
+            pageTextStyle: {
+              color: this.lineTextColor
+            },
+            icon: 'path://M2171.083,290H2167a1,1,0,1,1,0-2h4.083a6,6,0,0,1,11.834,0H2187a1,1,0,1,1,0,2h-4.083a6,6,0,0,1-11.834,0Zm1.917-1a4,4,0,1,0,4-4A4,4,0,0,0,2173,289Z'
+          },
+          tooltip: tooltip,
+          xAxis: {
+            axisLabel: {
+              color: this.lineTextColor
+            },
+            boundaryGap: false,
+            data: this.chartOptions.time,
+            type: 'category'
+          },
+          yAxis: _yAxis2,
+          series: map(seriesData, function (item, idx) {
+            var yAxisIndex = 0;
+            if (!_this3.params6.includes(item)) {
+              if (item === 'windDirection') {
+                if (_this3.chartOptions.axis.includes('windLevel')) {
+                  yAxisIndex = _yAxis2.findIndex(function (e) {
+                    return e.key === 'windLevel';
+                  });
+                } else {
+                  yAxisIndex = _yAxis2.findIndex(function (e) {
+                    return e.key === item;
+                  });
+                }
+              } else {
+                yAxisIndex = _yAxis2.findIndex(function (e) {
+                  return e.key === item;
+                });
+              }
+            } else {
+              if (item === 'co') {
+                yAxisIndex = _yAxis2.findIndex(function (e) {
+                  return e.key === item;
+                });
+              }
+            }
+            return {
+              name: item,
+              type: 'line',
+              smooth: false,
+              itemStyle: {
+                // normal: {
+                //   color: params => {
+                //     const v = params.value;
+                //     const t = params.seriesName;
+                //     return this.ignoreTag.includes(t) || t === 'windDirection' || t === 'weather'
+                //       ? 'transparent'
+                //       : this.mode === 'air'
+                //       ? this.airToColor(v, t)
+                //       : this.waterToColor(v, t);
+                //   },
+                // },
+              },
+              lineStyle: {
+                width: item === 'windDirection' ? 0 : 2
+              },
+              symbolSize: 3,
+              yAxisIndex: yAxisIndex,
+              showSymbol: true,
+              data: _this3.chartOptions.data[item].map(function (e, dataIndex) {
+                return item === 'windDirection' ? {
+                  name: idx,
+                  value: _this3.chartOptions.axis.includes('windLevel') ? _this3.chartOptions.data['windLevel'][dataIndex] : 0,
+                  symbolSize: 0,
+                  label: {
+                    show: true,
+                    width: 15,
+                    height: 15,
+                    distance: 0,
+                    rotate: e,
+                    color: 'rgba(0,0,0,0)',
+                    verticalAlign: 'middle',
+                    zlevel: 10,
+                    backgroundColor: {
+                      image: WIND
+                    }
+                  }
+                } : item === 'windLevel' ? {
+                  name: idx,
+                  value: e,
+                  symbol: 'none'
+                } : {
+                  name: idx,
+                  value: e,
+                  label: !isEmpty(_this3.chartOptions.event[dataIndex]) && _this3.chartOptions.event[dataIndex].replace('.', '').toLowerCase() === item ? {
+                    show: true,
+                    width: 10,
+                    height: 10,
+                    distance: 0,
+                    color: 'rgba(0,0,0,0)',
+                    position: 'insideTop',
+                    zlevel: 10,
+                    backgroundColor: {
+                      image: WARN
+                    }
+                  } : {
+                    show: false
+                  }
+                };
+              })
+            };
+          })
+        };
+        this.chart.setOption(this.chartOptions.time.length > 20 ? _extends(_options2, {
+          dataZoom: _dataZoom
+        }) : _options2);
+      }
+    },
+    mouseoverYaxisName: function mouseoverYaxisName(e) {
+      if (e.componentType === 'yAxis') {
+        this.params6NameTooltipShow = true;
+      }
+    },
+    mouseoutYaxisName: function mouseoutYaxisName(e) {
+      if (e.componentType === 'yAxis') {
+        this.params6NameTooltipShow = false;
+      }
+    },
+    getRightLabelLegend: function getRightLabelLegend() {
+      var gap = chunk(this.chart.getOption().grid.map(function (item) {
+        return item.top;
+      }), 2);
+      var height = chunk(this.chart.getOption().grid.map(function (item) {
+        return item.top;
+      }), 2);
+      var list = this.chart.getOption().grid.map(function (item) {
+        return item.height;
+      });
+      this.rightLegend = {
+        labelHeight: Math.abs(subtract.apply(undefined, _toConsumableArray(first(gap)))),
+        labelGapHeight: Math.abs(subtract.apply(undefined, _toConsumableArray(last(height)))),
+        axis: list.splice(1, list.length - 1),
+        height: this.chart.getHeight() - (first(this.chart.getOption().dataZoom).height || 0),
+        labelWrapperHeight: sum(this.chart.getOption().grid.map(function (item) {
+          return item.height;
+        }))
+      };
+    },
+    formatSeries: function formatSeries() {
+      var _this4 = this;
+
+      return map(this.chartOptions.axis, function (item, idx) {
+        return {
+          name: item,
+          type: 'bar',
+          smooth: true,
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(100, 123, 255, 0.15)'
+            // color: item === 'weather' ? 'transparent' :'rgba(100, 123, 255, 0.15)',
+          },
+          itemStyle: {
+            normal: {
+              color: function color(params) {
+                var v = params.value;
+                var t = params.seriesName;
+                return _this4.ignoreTag.includes(t) || t === 'windDirection' || t === 'weather' ? 'transparent' : _this4.mode === 'air' ? _this4.airToColor(v, t) : _this4.waterToColor(v, t);
+              }
+            }
+          },
+          symbolSize: 3,
+          xAxisIndex: idx,
+          yAxisIndex: idx,
+          showSymbol: false,
+          data: _this4.ignoreTag.includes(item) ? _this4.chartOptions.data[item].map(function (e, dataIndex) {
+            return {
+              name: idx,
+              value: 100,
+              label: {
+                show: true,
+                distance: 0,
+                color: e && e.toString().indexOf('-') < 0 ? _this4.lineTextColor : 'rgba(100,123,255, 0.6)',
+                verticalAlign: 'middle',
+                formatter: function formatter(charts, options) {
+                  if (charts.seriesName === 'windLevel') {
+                    return e && e !== '--' ? parseInt(e) : '';
+                  } else {
+                    return e ? e : '-';
+                  }
+                }
+              },
+              mark: _this4.chartOptions.markerData && _this4.chartOptions.markerData[item] ? _this4.chartOptions.markerData[item][dataIndex] : undefined
+            };
+          }) : _this4.chartOptions.data[item].map(function (e, dataIndex) {
+            if (item === 'windDirection') {
+              return {
+                name: idx,
+                value: 100,
+                label: {
+                  show: true,
+                  width: e && e !== '--' ? 10 : 0,
+                  distance: 0,
+                  rotate: _this4.strictRotate(e),
+                  color: 'rgba(0,0,0,0)',
+                  verticalAlign: 'middle',
+                  zlevel: 10,
+                  backgroundColor: e && e !== '--' ? {
+                    image: WIND
+                  } : {
+                    image: ''
+                  }
+                }
+              };
+            } else if (item === 'weather') {
+              return {
+                name: idx,
+                value: 100,
+                label: {
+                  show: true,
+                  width: 10,
+                  distance: 0,
+                  rotate: e,
+                  color: 'rgba(0,0,0,0)',
+                  zlevel: 10,
+                  verticalAlign: 'middle',
+                  backgroundColor: {
+                    image: e
+                  }
+                }
+              };
+            } else {
+              return {
+                name: idx,
+                value: e,
+                label: !isEmpty(_this4.chartOptions.event[dataIndex]) && _this4.chartOptions.event[dataIndex].replace('.', '').toLowerCase() === item ? {
+                  show: true,
+                  width: 10,
+                  distance: 0,
+                  color: 'rgba(0,0,0,0)',
+                  position: 'insideTop',
+                  zlevel: 10,
+                  backgroundColor: {
+                    image: WARN
+                  }
+                } : {
+                  show: false
+                },
+                mark: _this4.chartOptions.markerData && _this4.chartOptions.markerData[item] ? _this4.chartOptions.markerData[item][dataIndex] : undefined
+              };
+            }
+          })
+        };
+      });
+    },
+    formatYaxisName: function formatYaxisName(item, index, isTruncate) {
+      var data = this.chartOptions.data[item];
+      var endData = data[data.length - 1];
+      switch (item) {
+        case 'windLevel':
+          return !isNaN(endData) ? '' + parseInt(endData) : '0';
+        case 'windDirection':
+          return '50';
+        case 'weather':
+          return '100';
+        default:
+          var numberString = '' + endData;
+          if (isTruncate) {
+            if (numberString) {
+              if (numberString.length > this.$props.textTruncateNumber) {
+                return numberString.substr(0, this.$props.textTruncateNumber) + '...';
+              } else {
+                return numberString;
+              }
+            } else {
+              return '--';
+            }
+          } else {
+            return endData ? endData : '--';
+          }
+      }
+    },
+    formatLineYaxisName: function formatLineYaxisName(numberString) {
+      if (numberString.length > this.$props.textTruncateNumber) {
+        return numberString.substr(0, this.$props.textTruncateNumber) + '...';
+      } else return numberString;
+    },
+    formatRealYaxisNameRotate: function formatRealYaxisNameRotate(item) {
+      var data = this.chartOptions.data[item];
+      var endData = data[data.length - 1];
+      if (item === 'windDirection') {
+        var direction = parseFloat(endData);
+        if (direction < 180) {
+          return Math.abs(direction - 180);
+        } else {
+          return -Math.abs(direction - 180);
+        }
+      } else {
+        return 0;
+      }
+    },
+    strictRotate: function strictRotate(direction) {
+      if (direction < 180) {
+        return Math.abs(direction - 180);
+      } else {
+        return -Math.abs(direction - 180);
+      }
+    },
+    formatRealYaxisName: function formatRealYaxisName(item, h, isTruncate) {
+      var data = this.chartOptions.data[item];
+      var endData = data[data.length - 1];
+      switch (item) {
+        case 'windDirection':
+          return {
+            color: 'rgba(0,0,0,0)',
+            height: 15,
+            verticalAlign: 'bottom',
+            backgroundColor: {
+              image: WIND
+            }
+          };
+        case 'weather':
+          return {
+            color: 'rgba(0,0,0,0)',
+            verticalAlign: 'middle',
+            backgroundColor: {
+              image: endData
+            }
+          };
+        default:
+          return {
+            fontSize: 12,
+            color: this.lineTextColor
+          };
+      }
+    },
+    onChange: function onChange(e) {
+      this.$emit('change', e.target.value);
+    },
+    params6Change: function params6Change(e) {
+      this.currentParams = e;
+      this.params6NameTooltipShow = false;
+      this.renderChartView();
+    },
+    params6LinkChange: function params6LinkChange(e) {
+      this.current6Params = e;
+      this.renderChartView();
+    },
+    paramsOtherLinkChange: function paramsOtherLinkChange(e) {
+      this.currentOtherParams = e;
+      this.renderChartView();
+    }
+  },
+  render: function render() {
+    var _this5 = this;
+
+    var h = arguments[0];
+    var _$props = this.$props,
+        imageStyle = _$props.imageStyle,
+        image = _$props.image,
+        description = _$props.description;
+
+    var emptyProps = {
+      imageStyle: imageStyle,
+      image: image,
+      description: description
+    };
+    var factor = this.mode === 'air' ? toolkits.pollutionFactors.factorDict.factor : toolkits.waterLevel.waterDict.factor;
+    var buttonsNodes = this.$scopedSlots['default'] && h(
+      'div',
+      { 'class': 'line-bar-buttons' },
+      [this.$scopedSlots['default']()]
+    );
+    var chartNodes = h(
+      'div',
+      {
+        'class': this.$props.isExpand ? 'iep-mutiple-chart-core-box-expand' : 'iep-mutiple-chart-core-box',
+        style: {
+          '--pr': this.$props.chartType === 'bar' && !this.$props.closeReal ? '10px' : 0,
+          'grid-template-rows': this.$props.isExpand ? 'repeat(' + this.rows + ', 1fr)' : 'none',
+          'grid-template-columns': this.$props.isExpand ? 'repeat(auto-fill, minmax(' + this.minWidth + 'px, 1fr))' : 'none'
+        }
+      },
+      [h(
+        'div',
+        {
+          'class': 'params6-name-tooltip',
+          directives: [{
+            name: 'show',
+            value: this.params6NameTooltipShow
+          }],
+
+          ref: 'params6-name-tooltip'
+        },
+        [Object.keys(this.params6Item).map(function (e) {
+          return e !== _this5.currentParams ? h(
+            'div',
+            {
+              on: {
+                'click': function click() {
+                  return _this5.params6Change(e);
+                }
+              }
+            },
+            [_this5.params6Item[e].name]
+          ) : null;
+        })]
+      ), this.$props.isInteraction && h(
+        'div',
+        { 'class': 'params6-check-list' },
+        [this.params6.map(function (item) {
+          return h(
+            'div',
+            {
+              'class': item === _this5.current6Params ? 'current' : '',
+              on: {
+                'click': function click() {
+                  return _this5.params6LinkChange(item);
+                }
+              }
+            },
+            [h('div', [factor[item].name])]
+          );
+        })]
+      ), this.$props.isInteraction && this.omitParams6Link.length ? h(
+        'div',
+        { 'class': 'paramsOther-check-list' },
+        [this.omitParams6Link.map(function (item) {
+          return h(
+            'div',
+            {
+              'class': isEqual(item, _this5.currentOtherParams) ? 'current' : '',
+              on: {
+                'click': function click() {
+                  return _this5.paramsOtherLinkChange(item);
+                }
+              }
+            },
+            [h('div', [Array.isArray(item) ? item.map(function (e) {
+              return factor[e].name;
+            }).join('') : factor[item].name])]
+          );
+        })]
+      ) : '', !this.$props.isExpand && h('div', { 'class': 'iep-mutiple-chart-core', ref: 'chartDom' }), this.$props.isExpand && this.omitAqiMainAndDir.map(function (item) {
+        return h(SingleLine, {
+          attrs: {
+            theme: _this5.$props.theme,
+            parm: item,
+            mode: _this5.$props.mode,
+            lineTextColor: _this5.lineTextColor,
+            time: _this5.$props.time,
+            data: _this5.$props.data
+          }
+        });
+      })]
+    );
+    return h(
+      'div',
+      {
+        'class': 'iep-mutiple-chart',
+        ref: 'iep-mutiple-chart',
+        style: {
+          '--mdTextColor': this.lineTextColor,
+          '--hoverTextColor': this.theme === 'dark' ? '#7a94fb' : 'blue',
+          '--mdBgColor': this.theme === 'dark' ? '#333' : '#e5e5e5'
+        }
+      },
+      [this.isEmpty(this.chartOptions.data) ? this.$slots.empty ? this.$slots.empty : h('empty', { props: emptyProps }) : [buttonsNodes, chartNodes]]
+    );
+  }
+};