生产动态，多Grid型图表控件；

只做了样式逻辑，没有做数据查询逻辑

vue/src/components/basic/chart/chart-prod-dynamics.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <a-form
+      ref="formRef"
+      name="advanced_search"
+      class="ant-advanced-search-form"
+      :model="formState"
+      @finish="onFinish"
+    >
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item
+            label="统计起止日期"
+            :label-col="{span:8}">
+            <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" @change="onRangeChange"/>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="4">
+          <a-form-item
+            name="selectType"
+            label="统计维度"
+            :label-col="{span:12}">
+            <a-select
+              v-model:value="formState.selectType"
+              :options="getOptions()"
+            ></a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item
+            name="tempNo"
+            label="数据项"
+            :label-col="{span:8}">
+            <a-select
+              v-model:value="formState.dataTypes"
+              mode="multiple"
+              placeholder="..."
+              max-tag-count="responsive"
+              :options="getTypeOptions()"
+            ></a-select>
+          </a-form-item>
+        </a-col>
+
+        <a-col :span="6">
+          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="echart" :id="('chart-'+id)" :style="getChartStyle()"></div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed, markRaw, ref, reactive} from 'vue';
+  import * as echarts from "echarts";
+  import dayjs from 'dayjs';
+  import type {FormInstance} from 'ant-design-vue';
+
+  export  default defineComponent ({
+    props:{
+      datas : [] as any
+    },
+    name : 'ChartProdDynmics',
+    data() {
+      return{
+        loading : false,
+        chartStyle: { width: "100%", height: "100%" },
+        chart : null as any,
+        serieType : 'line',
+        id : Date.now(),
+        hovered : false,
+        height : 130
+      }
+    },
+    setup(props, context){
+      console.log("ChartCell setup" , props, context);
+
+      const datas = computed(() => {
+        return props.datas ? props.datas : []
+      });
+
+      const formRef = ref<FormInstance>();
+      const formState = reactive({
+        selectType: "日",  beiginDate: '', endDate: '',
+        dataTypes : ['0', '1', '2', '5']
+      });
+
+      return{
+        datas,
+        formRef,
+        formState
+      }
+    },
+    mounted(){
+      console.log("mounted" , this.id);
+      this.readerChart();
+    },
+    methods:{
+      onFinish:function (){
+        this.readerChart();
+      },
+      getChartStyle:function (){
+        return { width: "100%", height: (this.height) * this.getTypes().length + 160 + "px" };
+      },
+      getOptions:function (){
+        return [{label:'日', value:'0'},
+          {label:'月', value:'1'},
+          {label:'年', value:'2'}];
+      },
+      getTypeOptions:function (){
+        return [{label:'产油量', value:'0'},
+          {label:'产水量', value:'1'},
+          {label:'产液量', value:'2'},
+          {label:'产气量', value:'3'},
+          {label:'含水率', value:'4'},
+          {label:'油井开井数', value:'5'}];
+      },
+      getTypes:function (){
+        return this.getTypeOptions().filter((item) => {
+          return this.formState.dataTypes.indexOf(item.value) >=0;
+        });
+      },
+      getxDatas:function (){
+        //根据后台数据生成需要显示的数据集
+        let day = dayjs();
+        let arys = [] as any;
+        for(let i=0;i<12;i++){
+          day = day.add(1, 'day');
+          arys.push(day.format('YYYY-MM-DD'));
+        }
+        console.log("getxDatas",arys);
+        return arys;
+      },
+      getyDatas:function (){
+        //根据后台数据生成需要显示的数据集
+        let datas = [] as any;
+        let xLength = this.getxDatas().length;
+        for(let i=0;i< this.getTypes().length;i++){
+          let arys = [] as any;
+          for(let n=0;n<xLength;n++){
+            arys.push(parseInt(Math.random() * (10000 - 1000 + 1) + 1000));
+          }
+          datas.push(arys);
+        }
+        console.log("getyDatas",datas);
+        return datas;
+      },
+      getGrids:function (){
+        let grids = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let top = 20 + i * (this.height) + i * 10;
+          grids.push({ left:'10%', top: top + 'px', width:'86%', height: (this.height-30) + 'px'});
+        }
+        console.log("getGrids",grids);
+        return grids;
+      },
+      getxAxis:function (){
+        let xAxis = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let row = { gridIndex : i, type : 'category',
+            data : this.getxDatas(),
+            show : (i+1)==showList.length,
+            axisLabel:{rotate:50}};
+          xAxis.push(row);
+        }
+        console.log("getxAxis",xAxis);
+        return xAxis;
+      },
+      getyAxis:function (){
+        let yAxis = [] as any;
+        let showList = this.getTypes();
+        for(let i=0;i< showList.length;i++){
+          let row = { gridIndex : i,
+            name:showList[i].label,
+            nameGap: 50,
+            nameLocation:'center',
+            type : 'value'};
+          yAxis.push(row);
+        }
+        console.log("getyAxis",yAxis);
+        return yAxis;
+      },
+      getSeries:function (){
+        let series = [] as any;
+        let showList = this.getTypes();
+        let yDatas = this.getyDatas();
+        for(let i=0;i< showList.length;i++){
+          let row = { xAxisIndex : i, yAxisIndex: i, type : this.serieType, data: yDatas[i] };
+          series.push(row);
+        }
+        console.log("getSeries",series);
+        return series;
+      },
+      readerChart: function () {
+        const option = {
+          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
+          grid: this.getGrids(),
+          xAxis: this.getxAxis(),
+          yAxis: this.getyAxis(),
+          series: this.getSeries()
+        };
+        console.log("readerChart-"+this.serieType,option);
+
+        if(this.chart!=null) this.chart.dispose();
+        this.chart = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
+        this.chart.setOption(option);
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/views/position/test.vue

@@ -25,6 +25,8 @@
       <!--热门搜索历史使用示例，实际应用改样式即可-->
       <QueryHistoryList ref="queryHistoryList" :maxRows="20"></QueryHistoryList>
     </div>
+
+    <a-divider orientation="left">列表单元格中显示简单的曲线图</a-divider>
     <div style="width:1000px;">
       <a-table :columns="columns" :data-source="data">
         <template #bodyCell="{ column, text }">
@@ -37,6 +39,11 @@
         </template>
       </a-table>
     </div>
+
+    <a-divider orientation="left">Grid类型的图表</a-divider>
+    <div style="width:1200px;">
+      <ChartProdDynmics></ChartProdDynmics>
+    </div>
   </div>
 </template>
 
@@ -46,10 +53,11 @@ import { useRoute} from 'vue-router';
 import QueryHistoryList from '@/components/basic/querylog/history-list.vue'
 import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue'
 import ChartCell from '@/components/basic/chart/chart-cell.vue'
+import ChartProdDynmics from '@/components/basic/chart/chart-prod-dynamics.vue'
 
 export default defineComponent({
   name: 'QueryTest',
-  components: {QueryHistoryList, QueryHistoryComplete, ChartCell},
+  components: {QueryHistoryList, QueryHistoryComplete, ChartCell, ChartProdDynmics},
   setup() {
     const route = useRoute();
     const queryHistoryComplete = ref<typeof QueryHistoryComplete>();