图表线条颜色

vue/src/components/basic/chart/chart-cell.vue

@@ -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 : '#5470c6';
       });
 
       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,7 @@
       },
       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}}];
         //数据组装，这里根据业务组装y轴数据
         (dataArys! as any).forEach(row=>{ series[0].data.push(row[this.dataType]) });
         console.log("getSeries", series);
@@ -109,7 +117,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();
@@ -129,7 +137,7 @@
         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();

vue/src/views/position/test.vue

@@ -35,7 +35,7 @@
               <!--列表单元格中显示曲线图，数据需要根据业务库整理-->
               <!--timeType day month year-->
               <!--dataType gas oil-->
-              <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="('吉45-144(A2)')"></ChartCell>
+              <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="('吉45-144(A2)')" :lineColor="('#FF0000')"></ChartCell>
             </div>
           </template>
         </template>