iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
290 lines (272 loc) • 9.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _chartTemplate = require('../chart-template');
var _chartTemplate2 = _interopRequireDefault(_chartTemplate);
var _propsUtil = require('../_util/props-util');
var _lodash = require('lodash');
var _pollutionFactors = require('../toolkits/pollutionFactors');
var _enum = require('../multiple-data/enum');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'IepDoubleBar',
props: (0, _propsUtil.mergeProps)({
topData: _vueTypes2['default'].array.def(function () {
return [];
}),
topName: _vueTypes2['default'].string.def('pm25'),
bottomData: _vueTypes2['default'].array.def(function () {
return [];
}),
bottomName: _vueTypes2['default'].string.def('pm10'),
event: _vueTypes2['default'].array.def(function () {
return [];
}),
axis: _vueTypes2['default'].array.def(function () {
return [];
}),
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
mixinOptions: _vueTypes2['default'].object.def(function () {})
}, _chartTemplate2['default'].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 (!(0, _lodash.isEmpty)(e.topData) && !(0, _lodash.isEmpty)(e.bottomData)) {
var toColor = _pollutionFactors.formatValueToColor;
var toTextColor = _pollutionFactors.formatValueToFontColor;
var _$props2 = this.$props,
theme = _$props2.theme,
mixinOptions = _$props2.mixinOptions,
loading = _$props2.loading;
this.chartOptions = (0, _extends3['default'])({}, (0, _lodash.omit)(this.$props, ['topData', 'topName', 'event', 'bottomData', 'bottomName', 'axis', 'mixinOptions', 'theme']), {
theme: theme,
loading: e.loading,
options: (0, _extends3['default'])({
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: _pollutionFactors.factorDict.factor[e.topName] ? _pollutionFactors.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: _pollutionFactors.factorDict.factor[e.bottomName] ? _pollutionFactors.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: !(0, _lodash.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: _enum.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: !(0, _lodash.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: _enum.WARN
}
}
};
})
}]
}, mixinOptions)
});
} else {
this.chartOptions = {};
}
},
immediate: true,
deep: true
}
},
render: function render() {
var h = arguments[0];
var chartOptions = this.chartOptions;
if (!(0, _lodash.isEmpty)(chartOptions)) {
return h(_chartTemplate2['default'], { props: (0, _extends3['default'])({}, chartOptions) });
} else {
return h(_chartTemplate2['default']);
}
}
};