iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
1,378 lines (1,336 loc) • 48.4 kB
JavaScript
'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);
var _enum = require('./enum');
var _lodash = require('lodash');
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _tooltip2 = require('./tooltip');
var _tooltip3 = _interopRequireDefault(_tooltip2);
var _singleLine = require('./singleLine');
var _singleLine2 = _interopRequireDefault(_singleLine);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'IepMultipleData',
components: {
empty: _empty2['default'],
SingleLine: _singleLine2['default']
},
props: {
mode: _vueTypes2['default'].oneOf(['air', 'water']).def('air'),
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
currentText: _vueTypes2['default'].string.def('实时'),
axis: _vueTypes2['default'].array.def(function () {
return [];
}),
time: _vueTypes2['default'].array.def(function () {
return [];
}),
event: _vueTypes2['default'].array.def(function () {
return [];
}),
data: _vueTypes2['default'].any,
markerData: _vueTypes2['default'].any,
isTruncate: _vueTypes2['default'].bool.def(true),
textTruncateNumber: _vueTypes2['default'].number.def(4),
image: _vueTypes2['default'].any,
description: _vueTypes2['default'].any,
imageStyle: _vueTypes2['default'].object,
closeReal: _vueTypes2['default'].bool.def(false),
scrollEnd: _vueTypes2['default'].bool.def(false),
textColor: _vueTypes2['default'].string,
chartType: _vueTypes2['default'].oneOf(['bar', 'line']),
isInteraction: _vueTypes2['default'].bool.def(false), // 联动图
isExpand: _vueTypes2['default'].bool.def(false) // 展开图
},
data: function data() {
return {
isEmpty: _isEmpty2['default'],
airToColor: _toolkits2['default'].pollutionFactors.formatValueToColor,
airTextColor: _toolkits2['default'].pollutionFactors.formatValueToFontColor,
waterToColor: _toolkits2['default'].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: !(0, _isEmpty2['default'])(this.time) ? this.chartTypeClone === 'bar' ? ['fixed_axis'].concat((0, _toConsumableArray3['default'])(this.axis.filter(function (item) {
return item !== 'aqiMain';
}))) : this.axis.filter(function (item) {
return item !== 'aqiMain' && item !== 'weather';
}) : [],
aqiMain: !(0, _isEmpty2['default'])(this.data) && !(0, _isEmpty2['default'])(this.data.aqiMain) ? this.data.aqiMain : [],
time: this.time,
event: this.event,
markerData: this.markerData,
data: !(0, _isEmpty2['default'])(this.time) ? this.chartTypeClone === 'bar' ? (0, _extends3['default'])({
fixed_axis: []
}, (0, _lodash.omit)(this.data, ['aqiMain'])) : (0, _lodash.omit)(this.data, ['aqiMain', 'weather']) : {}
};
},
params6: function params6() {
if (this.mode === 'water') {
return (0, _lodash.intersection)(['waterLevel', 'cod', 'nh3n', 'tp', 'tn', 'dissolvedOxygen', 'codMn'], this.$props.axis);
}
return (0, _lodash.intersection)(['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'], this.$props.axis);
},
params6Item: function params6Item() {
var factor = this.mode === 'air' ? _toolkits2['default'].pollutionFactors.factorDict.factor : _toolkits2['default'].waterLevel.waterDict.factor;
var obj = [];
(0, _map2['default'])((0, _lodash.filter)(this.params6, function (e) {
return e !== 'co';
}), function (e) {
obj[e] = factor[e];
});
return obj;
},
lineTextColor: function lineTextColor() {
return !(0, _isEmpty2['default'])(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 = (0, _debounce2['default'])(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 (!(0, _isEmpty2['default'])(e.axis) && !(0, _isEmpty2['default'])(e.time) && !(0, _isEmpty2['default'])(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) ? (0, _chunk2['default'])(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 = _toolkits2['default'].pollutionFactors.factorDict.factor;
var waterDict = _toolkits2['default'].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 ((0, _isEmpty2['default'])(dom) || !dom) {
return false;
}
if (!(0, _isEmpty2['default'])(this.chart)) {
this.chart.dispose(); //销毁
}
this.chart = _toolkits2['default'].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' ? _toolkits2['default'].pollutionFactors.factorDict.factor : _toolkits2['default'].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 _vue2['default']({
render: function render(h) {
return h(_tooltip3['default'], {
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((0, _lodash.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: _enum.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: _enum.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 ? (0, _extends3['default'])(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 _vue2['default']({
render: function render(h) {
return h(_tooltip3['default'], {
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 (!(0, _isEmpty2['default'])(this.chartOptions.aqiMain) && !(0, _isEmpty2['default'])(this.chartOptions.time)) {
this.multiAqiMain = this.chartOptions.aqiMain.every(function (item) {
return (0, _lodash.isArray)(item);
});
if (this.multiAqiMain) {
this.chartOptions.time.forEach(function (_, index) {
var item = _this3.chartOptions.aqiMain[index];
if (!(0, _isEmpty2['default'])(item)) {
item.forEach(function (cItem, _) {
if (!(0, _isEmpty2['default'])(cItem) && cItem !== '-' && cItem !== '') {
var axisIndex = _this3.chartOptions.axis.findIndex(function (e) {
return e === cItem;
});
mainRich[('' + cItem.toUpperCase() + axisIndex + index).replace('.', '')] = {
backgroundColor: {
image: _enum.MAIN
},
width: 16,
height: 16
};
}
});
}
});
} else {
this.chartOptions.aqiMain.forEach(function (item, index) {
if (!(0, _isEmpty2['default'])(item) && item !== '-' && item !== '') {
mainRich[('' + item.toUpperCase() + index).replace('.', '')] = {
backgroundColor: {
image: _enum.MAIN
},
width: 16,
height: 16
};
}
});
}
}
var _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: 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((0, _toConsumableArray3['default'])(_yAxis), (0, _toConsumableArray3['default'])((0, _map2['default'])(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: (0, _map2['default'])(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: (0, _map2['default'])(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 ? (0, _extends3['default'])(_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((0, _toConsumableArray3['default'])(yAxis1), (0, _toConsumableArray3['default'])((0, _map2['default'])(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
}
}
};
})), (0, _toConsumableArray3['default'])(yAxisCO));
var hideParams = this.params6.filter(function (e) {
return e !== _this3.currentParams && e !== 'co';
});
var seriesData = (0, _lodash.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: (0, _map2['default'])(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: _enum.WIND
}
}
} : item === 'windLevel' ? {
name: idx,
value: e,
symbol: 'none'
} : {
name: idx,
value: e,
label: !(0, _isEmpty2['default'])(_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: _enum.WARN
}
} : {
show: false
}
};
})
};
})
};
this.chart.setOption(this.chartOptions.time.length > 20 ? (0, _extends3['default'])(_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 = (0, _chunk2['default'])(this.chart.getOption().grid.map(function (item) {
return item.top;
}), 2);
var height = (0, _chunk2['default'])(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(_lodash.subtract.apply(undefined, (0, _toConsumableArray3['default'])((0, _lodash.first)(gap)))),
labelGapHeight: Math.abs(_lodash.subtract.apply(undefined, (0, _toConsumableArray3['default'])((0, _lodash.last)(height)))),
axis: list.splice(1, list.length - 1),
height: this.chart.getHeight() - ((0, _lodash.first)(this.chart.getOption().dataZoom).height || 0),
labelWrapperHeight: (0, _lodash.sum)(this.chart.getOption().grid.map(function (item) {
return item.height;
}))
};
},
formatSeries: function formatSeries() {
var _this4 = this;
return (0, _map2['default'])(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: _enum.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: !(0, _isEmpty2['default'])(_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: _enum.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: _enum.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' ? _toolkits2['default'].pollutionFactors.factorDict.factor : _toolkits2['default'].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': (0, _lodash.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(_singleLine2['default'], {
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]]
);
}
};