|
@@ -53,7 +53,7 @@
|
|
<div class="echarts-total">
|
|
<div class="echarts-total">
|
|
<span style="font-weight: bold;padding-right: 10px">统计区间:</span>
|
|
<span style="font-weight: bold;padding-right: 10px">统计区间:</span>
|
|
<template v-for="(it) in getTotals()">
|
|
<template v-for="(it) in getTotals()">
|
|
- <span :style="{color: it.color, fontWeight: 'bold'}">{{it.name}}</span> : {{it.total!=null? parseFloat( it.total).toFixed(3):0}}({{it.unit}})
|
|
|
|
|
|
+ <span :style="{color: it.color, fontWeight: 'bold'}">{{it.name}}</span> : {{it.total!=null? parseFloat( it.total).toFixed(3):0}}{{it.unit}}
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="echart" :id="('chart-'+id)" :style="getChartStyle()"></div>
|
|
<div class="echart" :id="('chart-'+id)" :style="getChartStyle()"></div>
|
|
@@ -83,12 +83,12 @@
|
|
height : 130,
|
|
height : 130,
|
|
datas : [],
|
|
datas : [],
|
|
timeList : [] as any,
|
|
timeList : [] as any,
|
|
- typeOptions: [{label:'产油量', leiLabel:'累产油量', value:'oil', unit:'万吨', color: '#ec1e27'},
|
|
|
|
- {label:'产水量', leiLabel:'累产水量', value:'water', unit:'万吨', color: '#00B0F0'},
|
|
|
|
- {label:'产液量', leiLabel:'累产液量', value:'fluid', unit:'万吨', color: '#60080e'},
|
|
|
|
- {label:'产气量', leiLabel:'累产气量', value:'gas', unit:'立方米', color: '#ffc800'},
|
|
|
|
|
|
+ typeOptions: [{label:'产油量', leiLabel:'累产油量', value:'oil', unit:'10^4t', color: '#ec1e27'},
|
|
|
|
+ {label:'产水量', leiLabel:'累产水量', value:'water', unit:'10^4t', color: '#00B0F0'},
|
|
|
|
+ {label:'产液量', leiLabel:'累产液量', value:'fluid', unit:'10^4t', color: '#60080e'},
|
|
|
|
+ {label:'产气量', leiLabel:'累产气量', value:'gas', unit:'m³', color: '#ffc800'},
|
|
{label:'含水率', leiLabel:'含水率', value:'watercut', unit:'%', color: '#322eda'},
|
|
{label:'含水率', leiLabel:'含水率', value:'watercut', unit:'%', color: '#322eda'},
|
|
- {label:'注水量', leiLabel:'累注水量', value:'vol', unit:'万吨', color: '#42f03e'}
|
|
|
|
|
|
+ {label:'注水量', leiLabel:'累注水量', value:'vol', unit:'10^4t', color: '#42f03e'}
|
|
] as any
|
|
] as any
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -260,7 +260,8 @@
|
|
nameGap: 100,
|
|
nameGap: 100,
|
|
nameLocation:'center',
|
|
nameLocation:'center',
|
|
type : 'value',
|
|
type : 'value',
|
|
- axisLabel: { formatter : '{value}'+this.getTypeUnit(showList[i].label)}};
|
|
|
|
|
|
+ // axisLabel: { formatter : '{value}'+"("+this.getTypeUnit(showList[i].label)+")"}
|
|
|
|
+ };
|
|
yAxis.push(row);
|
|
yAxis.push(row);
|
|
}
|
|
}
|
|
console.log("getyAxis",yAxis);
|
|
console.log("getyAxis",yAxis);
|
|
@@ -272,8 +273,9 @@
|
|
let yDatas = this.getyDatas();
|
|
let yDatas = this.getyDatas();
|
|
for(let i=0;i< showList.length;i++){
|
|
for(let i=0;i< showList.length;i++){
|
|
let row = { xAxisIndex : this.getGridIndex(i), yAxisIndex: this.getGridIndex(i),
|
|
let row = { xAxisIndex : this.getGridIndex(i), yAxisIndex: this.getGridIndex(i),
|
|
- type : this.serieType, data: yDatas[i] ,
|
|
|
|
- name : i<=1?showList[i].label: null,
|
|
|
|
|
|
+ type : this.serieType,
|
|
|
|
+ data: yDatas[i],
|
|
|
|
+ name : showList[i].label,//(i <= 1 ? showList[i].label : null),// +"("+this.getTypeUnit(showList[i].label)+")",
|
|
itemStyle:{color: this.getTypeColor(showList[i].label)}
|
|
itemStyle:{color: this.getTypeColor(showList[i].label)}
|
|
};
|
|
};
|
|
series.push(row);
|
|
series.push(row);
|
|
@@ -281,6 +283,14 @@
|
|
console.log("getSeries",series);
|
|
console.log("getSeries",series);
|
|
return series;
|
|
return series;
|
|
},
|
|
},
|
|
|
|
+ getFormatter:function (params){
|
|
|
|
+ let tooltipHtml = '<div><strong>' + params.seriesName + '</strong></div>';
|
|
|
|
+ // params.forEach(function (item) {
|
|
|
|
+ tooltipHtml += '<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params.color + ';"></span>' + params.name + ': ' + params.value + '(' + this.getTypeUnit(params.seriesName) + ')</div>';
|
|
|
|
+ // });
|
|
|
|
+ return tooltipHtml;
|
|
|
|
+ console.log("getFormatter",params);
|
|
|
|
+ },
|
|
getyAxisTitle:function (i, label){
|
|
getyAxisTitle:function (i, label){
|
|
return i<=1?"产油量/产水量":label;
|
|
return i<=1?"产油量/产水量":label;
|
|
},
|
|
},
|
|
@@ -303,7 +313,7 @@
|
|
totals.push({
|
|
totals.push({
|
|
name:showList[i].leiLabel,
|
|
name:showList[i].leiLabel,
|
|
total : total,
|
|
total : total,
|
|
- unit : this.getTypeUnit(showList[i].label),
|
|
|
|
|
|
+ unit : "("+this.getTypeUnit(showList[i].label)+")",
|
|
color: this.getTypeColor(showList[i].label)
|
|
color: this.getTypeColor(showList[i].label)
|
|
});
|
|
});
|
|
}
|
|
}
|
|
@@ -312,7 +322,7 @@
|
|
},
|
|
},
|
|
readerChart: function () {
|
|
readerChart: function () {
|
|
const option = {
|
|
const option = {
|
|
- tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
|
|
|
|
|
|
+ tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true, formatter: this.getFormatter},
|
|
toolbox: { feature: { saveAsImage: {} } },
|
|
toolbox: { feature: { saveAsImage: {} } },
|
|
grid: this.getGrids(),
|
|
grid: this.getGrids(),
|
|
xAxis: this.getxAxis(),
|
|
xAxis: this.getxAxis(),
|