参数统计

This commit is contained in:
zyx.net
2022-08-02 11:34:49 +08:00
parent 282c87e342
commit d361017136
@@ -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)