|
|
@@ -3,9 +3,9 @@
|
|
|
placement="left"
|
|
|
@visibleChange="onOpenChange">
|
|
|
<template #content>
|
|
|
- <div class="echart" :id="('popover-'+id)" :style="chartStylePopover"></div>
|
|
|
+ <div class="echart" :id="('popover-'+getChartId())" :style="chartStylePopover"></div>
|
|
|
</template>
|
|
|
- <div class="echart" :id="('chart-'+id)" :style="chartStyle"></div>
|
|
|
+ <div class="echart" :id="('chart-'+getChartId())" :style="chartStyle"></div>
|
|
|
</a-popover>
|
|
|
</template>
|
|
|
|
|
|
@@ -17,6 +17,7 @@
|
|
|
export default defineComponent ({
|
|
|
props:{
|
|
|
wellId: null as any,
|
|
|
+ lineColor : null as any,
|
|
|
timeType : null as any, //日 day 月 month 年 year
|
|
|
dataType : null as any//gas产气量 oil产油量
|
|
|
},
|
|
|
@@ -30,7 +31,8 @@
|
|
|
chart : null as any,
|
|
|
serieType : 'line',
|
|
|
hovered : false,
|
|
|
- datas : null
|
|
|
+ datas : null,
|
|
|
+ id : Date.now()
|
|
|
}
|
|
|
},
|
|
|
setup(props, context){
|
|
|
@@ -45,15 +47,18 @@
|
|
|
const wellId = computed(() => {
|
|
|
return props.wellId ? props.wellId : null
|
|
|
});
|
|
|
- const id = computed(() => {
|
|
|
- return wellId.value + "-" + dataType.value;
|
|
|
+ //const id = computed(() => {
|
|
|
+ // return wellId.value + "-" + dataType.value;
|
|
|
+ //});
|
|
|
+ const lineColor = computed(()=>{
|
|
|
+ return props.lineColor? props.lineColor : '#0058D0';
|
|
|
});
|
|
|
|
|
|
return{
|
|
|
timeType,
|
|
|
dataType,
|
|
|
wellId,
|
|
|
- id
|
|
|
+ lineColor
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
@@ -61,10 +66,10 @@
|
|
|
this.readerCell();
|
|
|
|
|
|
watch(
|
|
|
- () => this.id,
|
|
|
+ () => this.wellId,
|
|
|
(n, o) => {
|
|
|
if(n!=o) {
|
|
|
- console.log("wellId change",this.id, n, o);
|
|
|
+ console.log("wellId change",this.getChartId(), n, o);
|
|
|
this.chartDispose();
|
|
|
this.readerCell();
|
|
|
}
|
|
|
@@ -72,6 +77,9 @@
|
|
|
);
|
|
|
},
|
|
|
methods:{
|
|
|
+ getChartId:function (){
|
|
|
+ return this.id + "-" + this.wellId + "-" +this.dataType;
|
|
|
+ },
|
|
|
getDatas:async function(){
|
|
|
//数据查询逻辑，如果不查询，改此方法返回数据即可
|
|
|
if(this.datas==null){
|
|
|
@@ -93,7 +101,8 @@
|
|
|
},
|
|
|
getSeries:async function (showSymbol){
|
|
|
let dataArys = await this.getDatas();
|
|
|
- let series = [{type: this.serieType, data:[] as any, showSymbol:showSymbol}];
|
|
|
+ let series = [{type: this.serieType, data:[] as any, showSymbol:showSymbol,
|
|
|
+ itemStyle : {color:this.lineColor}, lineStyle : {width:1}}];
|
|
|
//数据组装，这里根据业务组装y轴数据
|
|
|
(dataArys! as any).forEach(row=>{ series[0].data.push(row[this.dataType]) });
|
|
|
console.log("getSeries", series);
|
|
|
@@ -109,7 +118,7 @@
|
|
|
console.log("readerCell-"+this.serieType,option);
|
|
|
|
|
|
if(this.cell==null)
|
|
|
- this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
|
|
|
+ this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.getChartId()) as HTMLElement));
|
|
|
if(this.cell!=null) {
|
|
|
this.cell.setOption(option);
|
|
|
this.cell.resize();
|
|
|
@@ -119,17 +128,17 @@
|
|
|
let xAxis = await this.getxAxis(true);
|
|
|
xAxis['nameRotate'] = 0;
|
|
|
const option = {
|
|
|
- title: { left: 'center', text: '累产量趋势图' },
|
|
|
+ title: { text: '累产量趋势图' },
|
|
|
tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
|
|
|
- grid: { top:'15%', left: '8%', right: '3%', bottom: '6%', containLabel: true },
|
|
|
+ grid: { top:'15%', left: '3%', right: '3%', bottom: '6%', containLabel: true },
|
|
|
xAxis: xAxis,
|
|
|
- yAxis: { name:'累产量', nameGap: 50, nameLocation:'center', type: 'value'},
|
|
|
+ yAxis: { type: 'value'},
|
|
|
series: await this.getSeries(true)
|
|
|
};
|
|
|
console.log("readerChart-"+this.serieType,option);
|
|
|
|
|
|
if(this.chart==null)
|
|
|
- this.chart = markRaw(echarts.init(document.getElementById('popover-'+this.id) as HTMLElement));
|
|
|
+ this.chart = markRaw(echarts.init(document.getElementById('popover-'+this.getChartId()) as HTMLElement));
|
|
|
if(this.chart!=null) {
|
|
|
this.chart.setOption(option);
|
|
|
this.chart.resize();
|
xiaoqiao