iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
270 lines (264 loc) • 9.15 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 } from 'lodash';
import { formatValueToColor, factorDict, formatValueToFontColor } from '../toolkits/pollutionFactors';
import { WARN } from '../multiple-data/enum';
export default {
name: 'IepDoubleBar',
props: mergeProps({
topData: PropTypes.array.def(function () {
return [];
}),
topName: PropTypes.string.def('pm25'),
bottomData: PropTypes.array.def(function () {
return [];
}),
bottomName: PropTypes.string.def('pm10'),
event: PropTypes.array.def(function () {
return [];
}),
axis: PropTypes.array.def(function () {
return [];
}),
theme: PropTypes.oneOf(['dark', 'light']).def('dark'),
mixinOptions: PropTypes.object.def(function () {})
}, ChartTemplate.props),
data: function data() {
return {
chartOptions: {}
};
},
computed: {
factor: function factor() {
var _$props = this.$props,
topData = _$props.topData,
topName = _$props.topName,
bottomData = _$props.bottomData,
bottomName = _$props.bottomName,
axis = _$props.axis,
event = _$props.event,
loading = _$props.loading;
return {
topData: topData,
topName: topName,
bottomData: bottomData,
bottomName: bottomName,
axis: axis,
event: event,
loading: loading
};
}
},
watch: {
factor: {
handler: function handler(e) {
if (!isEmpty(e.topData) && !isEmpty(e.bottomData)) {
var toColor = formatValueToColor;
var toTextColor = formatValueToFontColor;
var _$props2 = this.$props,
theme = _$props2.theme,
mixinOptions = _$props2.mixinOptions,
loading = _$props2.loading;
this.chartOptions = _extends({}, omit(this.$props, ['topData', 'topName', 'event', 'bottomData', 'bottomName', 'axis', 'mixinOptions', 'theme']), {
theme: theme,
loading: e.loading,
options: _extends({
legend: {
show: false
},
tooltip: {
confine: true,
trigger: 'axis',
className: 'tooltips',
axisPointer: {
type: 'shadow'
},
formatter: function formatter(val) {
return '\n <div class="chart-val-box">\n <span class="chart-val" style="background: ' + toColor(val[val[0].axisIndex].value, e.topName) + ';color: ' + toTextColor(val[val[0].axisIndex].value, e.topName) + ';">' + val[val[0].axisIndex].value + '</span>\n <span class="chart-val" style="background: ' + toColor(val[val[1].axisIndex].value, e.bottomName) + '; color: ' + toTextColor(val[val[1].axisIndex].value, e.bottomName) + '">' + val[val[1].axisIndex].value + '</span>\n </div>\n ';
}
},
grid: [{
top: '5.6%',
bottom: '55%',
left: '1%',
right: '2%',
containLabel: true
}, {
top: '55%',
bottom: '3%',
right: '2%',
left: '1%',
containLabel: true
}],
axisPointer: {
link: { xAxisIndex: 'all' },
label: {
backgroundColor: '#777'
},
shadowStyle: {
color: 'rgba(49,139,255,0.2)'
}
},
xAxis: [{
type: 'category',
gridIndex: 0,
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
data: e.axis
}, {
type: 'category',
gridIndex: 1,
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
data: e.axis
}],
yAxis: [{
type: 'value',
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 0,
show: true,
name: factorDict.factor[e.topName] ? factorDict.factor[e.topName].name : e.topName,
nameTextStyle: {
color: theme === 'dark' ? '#888' : '#999999',
fontWeight: '400',
fontSize: 12
}
}, {
type: 'value',
axisLabel: {
color: theme === 'dark' ? '#888' : '#999999',
fontSize: 12
},
splitLine: {
show: theme === 'light',
lineStyle: {
color: theme === 'dark' ? '#fff' : 'rgba(153, 153, 153, 0.3)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: theme === 'dark' ? '#888' : 'rgba(153, 153, 153, 0.3)',
width: 1
},
show: true
},
gridIndex: 1,
show: true,
name: factorDict.factor[e.bottomName] ? factorDict.factor[e.bottomName].name : e.bottomName,
nameTextStyle: {
color: theme === 'dark' ? '#888' : '#999999',
fontWeight: '400',
fontSize: 12
}
}],
series: [{
type: 'bar',
data: e.topData.map(function (item, index) {
return {
value: item,
itemStyle: {
color: toColor(item, e.topName)
},
label: {
show: !isEmpty(e.event[index]) && e.event[index] === e.topName,
width: 10,
height: 10,
distance: 0,
color: 'rgba(0,0,0,0)',
position: 'top',
zlevel: 10,
backgroundColor: {
image: WARN
}
}
};
})
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: e.bottomData.map(function (item, index) {
return {
value: item,
itemStyle: {
color: toColor(item, e.bottomName)
},
label: {
show: !isEmpty(e.event[index]) && e.event[index] === e.bottomName,
width: 10,
height: 10,
distance: 0,
color: 'rgba(0,0,0,0)',
position: 'top',
zlevel: 10,
backgroundColor: {
image: WARN
}
}
};
})
}]
}, mixinOptions)
});
} else {
this.chartOptions = {};
}
},
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);
}
}
};