参数统计
This commit is contained in:
@@ -50,7 +50,8 @@
|
||||
data() {
|
||||
return {
|
||||
queryParam:{
|
||||
value:1
|
||||
value:1,
|
||||
ctype:''
|
||||
},
|
||||
options:[],
|
||||
collecting:[],
|
||||
@@ -89,33 +90,6 @@
|
||||
this.submit = res.result.submit ? res.result.submit : []
|
||||
this.syncReport = res.result.syncReport ? res.result.syncReport : []
|
||||
this.dutyTerritory = res.result.dutyTerritory ? res.result.dutyTerritory : []
|
||||
this.collecting.forEach((item,index) => {
|
||||
this.collectingpercentage.push(item.percentage)
|
||||
this.collectingquantity.push(item.quantity)
|
||||
})
|
||||
this.notStart.forEach((item,index) => {
|
||||
this.notStartpercentage.push(item.percentage)
|
||||
this.notStartquantity.push(item.quantity)
|
||||
})
|
||||
this.submit.forEach((item,index) => {
|
||||
this.submitpercentage.push(item.percentage)
|
||||
this.submitquantity.push(item.quantity)
|
||||
})
|
||||
this.syncReport.forEach((item,index) => {
|
||||
this.syncReportpercentage.push(item.percentage)
|
||||
this.syncReportquantity.push(item.quantity)
|
||||
})
|
||||
if(this.queryParam.value = 1){
|
||||
this.collectingdata = this.collectingpercentage
|
||||
this.notStartdata = this.notStartpercentage
|
||||
this.submitdata = this.submitpercentage
|
||||
this.syncReportdata = this.syncReportpercentage
|
||||
}else{
|
||||
this.collectingdata = this.collectingquantity
|
||||
this.notStartdata = this.notStartquantity
|
||||
this.submitdata = this.submitquantity
|
||||
this.syncReportdata = this.syncReportquantity
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.getEcharts()
|
||||
},1000)
|
||||
@@ -136,24 +110,67 @@
|
||||
})
|
||||
},
|
||||
getonChange(value){
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
this.notStartquantity = []
|
||||
this.submitpercentage = []
|
||||
this.submitquantity = []
|
||||
this.syncReportpercentage = []
|
||||
this.syncReportquantity = []
|
||||
this.getData(value)
|
||||
},
|
||||
onChange(){
|
||||
onChange(value){
|
||||
this.collectingpercentage = []
|
||||
this.collectingquantity = []
|
||||
this.notStartpercentage = []
|
||||
this.notStartquantity = []
|
||||
this.submitpercentage = []
|
||||
this.submitquantity = []
|
||||
this.syncReportpercentage = []
|
||||
this.syncReportquantity = []
|
||||
this.getEcharts()
|
||||
|
||||
},
|
||||
getEcharts(chart, title, color, data, num) {
|
||||
this.collecting.forEach((item,index) => {
|
||||
this.collectingpercentage.push(item.percentage)
|
||||
this.collectingquantity.push(item.quantity)
|
||||
})
|
||||
this.notStart.forEach((item,index) => {
|
||||
this.notStartpercentage.push(item.percentage)
|
||||
this.notStartquantity.push(item.quantity)
|
||||
})
|
||||
this.submit.forEach((item,index) => {
|
||||
this.submitpercentage.push(item.percentage)
|
||||
this.submitquantity.push(item.quantity)
|
||||
})
|
||||
this.syncReport.forEach((item,index) => {
|
||||
this.syncReportpercentage.push(item.percentage)
|
||||
this.syncReportquantity.push(item.quantity)
|
||||
})
|
||||
if(this.queryParam.value == 1){
|
||||
this.collectingdata = this.collectingpercentage
|
||||
this.notStartdata = this.notStartpercentage
|
||||
this.submitdata = this.submitpercentage
|
||||
this.syncReportdata = this.syncReportpercentage
|
||||
}else if(this.queryParam.value == 2){
|
||||
this.collectingdata = this.collectingquantity
|
||||
this.notStartdata = this.notStartquantity
|
||||
this.submitdata = this.submitquantity
|
||||
this.syncReportdata = this.syncReportquantity
|
||||
}
|
||||
var chartDom = document.getElementById('main-left');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
var option1;
|
||||
|
||||
let xAxisData = [];
|
||||
// let data1 = [];
|
||||
// let data2 = [];
|
||||
// let data3 = [];
|
||||
// let data4 = [];
|
||||
this.dutyTerritory.forEach((item,index) => {
|
||||
xAxisData.push(item);
|
||||
})
|
||||
xAxisData = this.dutyTerritory
|
||||
// data1.push(+(Math.random() * 2).toFixed(2));
|
||||
// data2.push(+(Math.random() * 100).toFixed(2));
|
||||
// data3.push(+(Math.random() + 0.3).toFixed(2));
|
||||
@@ -173,24 +190,47 @@
|
||||
// dataView: {}
|
||||
// }
|
||||
},
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger:'axis',
|
||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
||||
type: 'line'// 默认为直线,可选为:'line' | 'shadow'
|
||||
},
|
||||
formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%'
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
// name: 'X Axis',
|
||||
axisLine: { onZero: true },
|
||||
splitLine: { show: false },
|
||||
splitArea: { show: false }
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// formatter: function(value) {
|
||||
// return value.split("").join("\n");
|
||||
// }
|
||||
},
|
||||
// axisLine: { onZero: true },
|
||||
// splitLine: { show: false },
|
||||
// splitArea: { show: false }
|
||||
},
|
||||
yAxis: {},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
formatter: '{value} %'
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
grid: {
|
||||
bottom: 100
|
||||
left: '10%',
|
||||
bottom: '15%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.$t('Notatthe'),
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#707486",
|
||||
@@ -201,7 +241,7 @@
|
||||
name: this.$t('Inthecollection'),
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#00B3BE",
|
||||
@@ -212,7 +252,7 @@
|
||||
name: this.$t('Submitted'),
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#26BD4B",
|
||||
@@ -223,7 +263,7 @@
|
||||
name: this.$t('SynchronizedLibrary'),
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
barWidth: 40,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: "#E83030",
|
||||
@@ -234,60 +274,20 @@
|
||||
dataZoom:[
|
||||
|
||||
{
|
||||
|
||||
type: 'slider',
|
||||
|
||||
show: false,
|
||||
|
||||
start:0,//默认为0
|
||||
|
||||
end: 100,//默认为100
|
||||
|
||||
type: 'slider',//给x轴设置滚动条
|
||||
show: true, //flase直接隐藏图形
|
||||
xAxisIndex: [0],
|
||||
|
||||
handleSize: 0,//滑动条的 左右2个滑动条的大小
|
||||
|
||||
height: 5,//组件高度
|
||||
|
||||
bottom: 0,//右边的距离
|
||||
|
||||
borderColor: "#e3e3e3",
|
||||
|
||||
fillerColor: '#51B7F9',
|
||||
|
||||
borderRadius:10,
|
||||
|
||||
backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色
|
||||
|
||||
showDataShadow: false,//是否显示数据阴影 默认auto
|
||||
|
||||
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
|
||||
|
||||
realtime:true, //是否实时更新
|
||||
|
||||
filterMode: 'filter',
|
||||
|
||||
zlevel:-10,
|
||||
|
||||
},
|
||||
//以下重点: 让鼠标滚动从缩放变成移动
|
||||
{
|
||||
|
||||
type: 'inside',
|
||||
|
||||
xAxisIndex: [0],
|
||||
|
||||
zoomOnMouseWheel:false, //滚轮不触发缩放
|
||||
|
||||
moveOnMouseMove:true, //鼠标移动触发平移
|
||||
|
||||
moveOnMouseWheel:true, //鼠标滚轮触发平移
|
||||
|
||||
},
|
||||
bottom: 0,
|
||||
height: 20,
|
||||
showDetail: false,
|
||||
startValue: 0,//滚动条的起始位置
|
||||
endValue: 9 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
|
||||
}
|
||||
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
option && myChart.setOption(option);
|
||||
|
||||
},
|
||||
mainLeftEcharts(data, color) {
|
||||
this.getEcharts('main-left', this.$t('Parametercollection'), color, data, 1)
|
||||
|
||||
Reference in New Issue
Block a user