iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
353 lines (347 loc) • 10.6 kB
JavaScript
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';
export default {
name: 'IepMultipleData',
components: {
empty: empty
},
props: {
mode: PropTypes.oneOf(['air', 'water']).def('air'),
axis: PropTypes.array.def(function () {
return [];
}),
time: PropTypes.array.def(function () {
return [];
}),
data: PropTypes.object.def(function () {})
},
data: function data() {
return {
isEmpty: isEmpty,
airDict: toolkits.pollutionFactors.factorDict.factor,
airToColor: toolkits.pollutionFactors.formatValueToColor,
airTextColor: toolkits.pollutionFactors.formatValueToFontColor,
waterDict: toolkits.waterLevel.waterDict.factor,
waterToColor: toolkits.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 = debounce(this.handleWindowResize, 300);
},
mounted: function mounted() {
var _this = this;
window.addEventListener('resize', this.handleWindowResize);
this.watchData = this.$watch('chartOptions', function (e) {
if (!isEmpty(e.axis) && !isEmpty(e.time) && !isEmpty(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 chunk(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 (isEmpty(dom) || !dom) {
return false;
}
this.chart = toolkits.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) + '"> </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: map(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(_toConsumableArray(map(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
}
};
})), _toConsumableArray(map(this.chartOptions.axis, function (item, index) {
return _extends({
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: map(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(_toConsumableArray(map(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]
};
})), _toConsumableArray(map(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 ? _extends(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]
);
}
};