diff --git a/jero-web/src/views/projectManagement/components/ParameterCollectionEchart.vue b/jero-web/src/views/projectManagement/components/ParameterCollectionEchart.vue
index 97d2c7c23..77439939d 100644
--- a/jero-web/src/views/projectManagement/components/ParameterCollectionEchart.vue
+++ b/jero-web/src/views/projectManagement/components/ParameterCollectionEchart.vue
@@ -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}
{a0}: {c0}%
{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)