iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
197 lines (189 loc) • 6.17 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import ChartTemplate from '../chart-template';
import { mergeProps } from '../_util/props-util';
import { isEmpty, omit, sum, cloneDeep } from 'lodash';
export default {
name: 'IepStackBar',
props: mergeProps({
data: PropTypes.array.def(function () {
return [];
}),
axis: PropTypes.array.def(function () {
return [];
}),
unit: PropTypes.array.def(function () {
return [];
}),
theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
mixinOptions: PropTypes.object.def(function () {}),
showOrder: PropTypes.bool.def(true)
}, ChartTemplate.props),
data: function data() {
return {
chartOptions: {},
themeColor: ['#0F6EFF', '#34D59B', '#FF9540', '#A36AFF', '#FFD240', '#80D8FF', '#FB4848', '#B8C32C', '#FF7BB8', '#82A8FF']
};
},
computed: {
factor: function factor() {
var _$props = this.$props,
data = _$props.data,
axis = _$props.axis,
loading = _$props.loading,
theme = _$props.theme;
return {
data: data,
axis: axis,
loading: loading,
theme: theme
};
}
},
watch: {
factor: {
handler: function handler(e) {
var _this = this;
var _$props2 = this.$props,
theme = _$props2.theme,
mixinOptions = _$props2.mixinOptions;
var emptyAxis = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23: 00', '24:00'];
var emptyData = [emptyAxis.map(function () {
return 0;
}), emptyAxis.map(function () {
return 0;
})];
var tooltip = isEmpty(e.data) ? {} : {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
className: 'iep-chart-tooltip-' + theme
};
var stackTotal = e.axis.map(function (item, index) {
return sum(e.data.map(function (citem) {
return citem.value[index] * 1;
}));
});
var orderArray = cloneDeep(stackTotal).sort(function (a, b) {
return b - a;
});
var targetOrder = stackTotal.map(function (item) {
return orderArray.indexOf(item) + 1;
});
var color = e.data.some(function (item) {
return item.color !== undefined;
}) ? e.data.map(function (item, index) {
return item.color && item.color.colorStops ? item.color.colorStops[0].color : item.color ? item.color : _this.themeColor[index];
}) : this.themeColor.map(function (item, index) {
return _this.themeColor[index];
});
var yAxisData = isEmpty(e.data) ? {
type: 'value',
min: isEmpty(e.data) && 400,
splitLine: {
lineStyle: {
color: 'rgba(153, 153, 153, 0.2)'
}
}
} : {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(153, 153, 153, 0.2)'
}
}
};
this.chartOptions = _extends({}, omit(this.$props, ['data', 'axis', 'mixinOptions', 'theme']), {
theme: theme,
loading: e.loading,
options: _extends({
tooltip: tooltip,
color: color,
legend: {
data: isEmpty(e.data) ? ['--'] : e.data.map(function (item) {
return item.name;
}),
itemHeight: 14,
itemWidth: 14,
selectedMode: isEmpty(e.data) ? false : true,
itemStyle: {
color: isEmpty(e.data) ? '#e5e5e5' : 'inherit'
},
textStyle: {
color: isEmpty(e.data) ? '#e5e5e5' : theme === 'light' ? '#000' : '#fff'
}
},
grid: [{
top: '16%',
bottom: '6%',
left: '6%',
right: '6%',
containLabel: true
}],
axisPointer: {
link: { xAxisIndex: 'all' },
label: {
backgroundColor: '#777'
},
shadowStyle: {
color: 'rgba(49,139,255,0.2)'
}
},
xAxis: {
type: 'category',
data: isEmpty(e.data) ? emptyAxis : e.axis,
axisTick: {
show: false
}
},
yAxis: yAxisData,
series: isEmpty(e.data) ? [{
type: 'bar',
name: '--',
data: emptyData[0]
}] : e.data.map(function (item, index) {
return {
type: 'bar',
name: item.name,
barCategoryGap: '60%',
stack: 'total',
label: {
show: _this.showOrder,
position: 'top',
color: theme === 'light' ? '#000' : '#fff',
formatter: function formatter(val) {
if (val.seriesIndex === e.data.length - 1) {
return '\u7B2C' + targetOrder[val.dataIndex] + '\u540D';
} else {
return '';
}
}
},
data: item.value.map(function (citem) {
return {
value: citem,
itemStyle: _extends({
color: _this.themeColor[index]
}, item)
};
})
};
})
}, mixinOptions)
});
},
immediate: true,
deep: true
}
},
render: function render() {
var h = arguments[0];
var chartOptions = this.chartOptions;
if (!isEmpty(chartOptions)) {
return h(ChartTemplate, { props: _extends({}, chartOptions) });
} else {
return h(ChartTemplate);
}
}
};