|
|
@ -0,0 +1,159 @@
|
|
|
(function(){
|
|
|
Vue.component('line-chart',{
|
|
|
template: '<div class="mtb10 bgc-fff c-border pb10">\
|
|
|
<div class="ui-grid ui-grid-middle plr10 c-border-b">\
|
|
|
<div class="ui-col-0">\
|
|
|
<span class="c-333 c-bold c-f14">{{panelName}}</span>\
|
|
|
</div>\
|
|
|
<div class="ui-col-1 c-t-right ptb5">\
|
|
|
<span class="date-tag" :class="{active: selectedDateType == 1}" data-type="1" @click="changeType(1)">日</span><!--\
|
|
|
--><span class="date-tag" :class="{active: selectedDateType == 2}" data-type="2" @click="changeType(2)">周</span><!--\
|
|
|
--><span class="date-tag" :class="{active: selectedDateType == 3}" data-type="3" @click="changeType(3)">月</span>\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
<div class="clearfix mt5 plr10">\
|
|
|
<div class="fl c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
|
|
|
<div class="fr c-f12 c-909090">单位：人</div>\
|
|
|
</div>\
|
|
|
<div class="line-chart" id="lineChart" style="height: 200px; width: 100%;"></div>\
|
|
|
</div>',
|
|
|
props:[],
|
|
|
data: function(){
|
|
|
return {
|
|
|
selectedDateType: 1,
|
|
|
startDate: "", //数据展示时显示的开始时间
|
|
|
endDate: "", //数据展示时显示的结束时间
|
|
|
panelName: ""
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
changeType: function(type){
|
|
|
this.selectedDateType = type;
|
|
|
//触发页面更新折线图的数据
|
|
|
EventBus.$emit("get-line-chart-data", {dateType: type});
|
|
|
}
|
|
|
},
|
|
|
mounted: function(){
|
|
|
var vm = this;
|
|
|
EventBus.$on("draw-line-chart", function(arg){
|
|
|
vm.panelName = arg.panelName;
|
|
|
drawLine(vm, arg);
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
|
|
|
function drawLine(vm, arg){
|
|
|
var lineCharts = echarts.init(document.getElementById('lineChart'));
|
|
|
var xData = arg.xData,
|
|
|
yDatas = arg.yDatas,
|
|
|
names = arg.quotaNames,
|
|
|
colors = arg.colors;
|
|
|
//处理数据, 数据按照10条数一屏展示
|
|
|
var lastIndex = xData.length % 10;
|
|
|
if(xData.length >10 ){
|
|
|
dataZoom_end = 100-(9/xData.length)*100;
|
|
|
}else{
|
|
|
dataZoom_end = 0;
|
|
|
}
|
|
|
//初始结束时间
|
|
|
var lastValue = xData[xData.length - 1];
|
|
|
if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
|
|
|
vm.endDate = lastValue;
|
|
|
}else if(vm.selectedDateType == 3){
|
|
|
var val = lastValue.substr(5,2)+"月"
|
|
|
vm.endDate = lastValue.substr(0,4)+"年"+val;
|
|
|
}
|
|
|
console.log(lastValue);
|
|
|
var options = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
color: colors,
|
|
|
legend: {
|
|
|
bottom: '0px',
|
|
|
data: name,
|
|
|
borderColor: "#f1f1f1"
|
|
|
},
|
|
|
grid: {
|
|
|
show: false,
|
|
|
left: '20px',
|
|
|
right: '20px',
|
|
|
bottom: '40px',
|
|
|
top: '20px',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: xData,
|
|
|
axisLabel: {
|
|
|
interval:0,//横轴信息全部显示
|
|
|
formatter: function (value, index) {
|
|
|
if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
|
|
|
if(index == 0){
|
|
|
vm.startDate = value;
|
|
|
return value.substr(5,2)+"月"+value.substr(8,2);
|
|
|
}else{
|
|
|
if(index == 9){
|
|
|
vm.endDate = value;
|
|
|
}
|
|
|
return value.substr(8,2);
|
|
|
}
|
|
|
}else if(vm.selectedDateType == 3){
|
|
|
var val = value.substr(5,2)+"月"
|
|
|
if(index == 0){
|
|
|
vm.startDate = value.substr(0,4)+"年"+val;
|
|
|
}else{
|
|
|
if(index == 9){
|
|
|
vm.endDate = value.substr(0,4)+"年"+val;
|
|
|
}
|
|
|
}
|
|
|
return val;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisPointer: {
|
|
|
snap: true
|
|
|
},
|
|
|
scale: true,
|
|
|
minInterval: 1,
|
|
|
boundaryGap: ['10%', '30%'],
|
|
|
splitLine: {show:false}
|
|
|
},
|
|
|
dataZoom: [{//给x轴设置滚动条
|
|
|
// show: false,
|
|
|
start: dataZoom_end,
|
|
|
end: 100,
|
|
|
type: 'slider',
|
|
|
zoomLock: true,
|
|
|
},{ //下面这个属性是内容区域配置
|
|
|
start: dataZoom_end,
|
|
|
end: 100,
|
|
|
type: 'inside',
|
|
|
zoomLock: true,
|
|
|
}]
|
|
|
};
|
|
|
var series = [],
|
|
|
legend = [];
|
|
|
for(var i=0; i<yDatas.length; i++){
|
|
|
var obj = {
|
|
|
name: name[i],
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
data: yDatas[i],
|
|
|
lineStyle:{
|
|
|
normal:{
|
|
|
color: colors[i]
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
series.push(obj);
|
|
|
}
|
|
|
options.series = series;
|
|
|
$("#lineChart").removeAttr('_echarts_instance_')
|
|
|
lineCharts.setOption(options);
|
|
|
}
|
|
|
})()
|
