列表单元格显示曲线简图，鼠标移动上去时，显示完整曲线图；

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

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

@@ -0,0 +1,118 @@
+<template>
+  <a-popover trigger="hover"
+             placement="left"
+             @visibleChange="onOpenChange">
+    <template #content>
+      <div class="echart" :id="('popover-'+id)" :style="chartStylePopover"></div>
+    </template>
+    <div class="echart" :id="('chart-'+id)" :style="chartStyle"></div>
+  </a-popover>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed, markRaw} from 'vue';
+  import * as echarts from "echarts";
+
+  export  default defineComponent ({
+    props:{
+      datas : [] as any
+    },
+    name : 'ChartCell',
+    data() {
+      return{
+        loading : false,
+        chartStyle: { width: "100%", height: "100%" },
+        chartStylePopover: { width: "460px", height: "300px" },
+        cell : null as any,
+        chart : null as any,
+        serieType : 'line',
+        id : Date.now(),
+        hovered : false
+      }
+    },
+    setup(props, context){
+      console.log("ChartCell setup" , props, context);
+
+      const datas = computed(() => {
+        return props.datas ? props.datas : []
+      });
+
+      return{
+        datas
+      }
+    },
+    mounted(){
+      console.log("mounted" , this.id);
+      this.readerCell();
+      //this.readerChart();
+    },
+    methods:{
+      getxAxis:function (show){
+        let xAxis = {type : 'category', data : [] as any, show : show, axisLabel:{rotate:50}};
+        //数据组装，这里根据业务组装x轴数据
+        xAxis.data = ['2023年1月', '2023年2月', '2023年3月', '2023年4月', '2023年5月', '2023年6月',
+          '2023年7月', '2023年8月', '2023年9月', '2023年10月', '2023年11月', '2023年12月'];
+        return xAxis;
+      },
+      getyAxis:function (){
+        return {type: 'value', min:'dataMin', max:'dataMax', show:false };
+      },
+      getSeries:function (showSymbol){
+        let series = [{type: this.serieType, data:[] as any, showSymbol:showSymbol}];
+        //数据组装，这里根据业务组装y轴数据
+        series[0].data = [820, 932, 901, 934, 1290, 1330,
+        2000, 3000, 4000, 5000, 5000, 6000];
+        console.log("getSeries", series);
+        return series;
+      },
+      readerCell: function () {
+        const option = {
+          grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
+          xAxis: this.getxAxis(false),
+          yAxis: this.getyAxis(),
+          series: this.getSeries(false)
+        };
+        console.log("readerCell-"+this.serieType,option);
+
+        if(this.cell==null)
+          this.cell = markRaw(echarts.init(document.getElementById('chart-'+this.id) as HTMLElement));
+        if(this.cell!=null) {
+          this.cell.setOption(option);
+          this.cell.resize();
+        }
+      },
+      readerChart: function () {
+        let xAxis = this.getxAxis(true);
+        xAxis['nameRotate'] = 0;
+        const option = {
+          title: { left: 'center', text: '累产量趋势图' },
+          tooltip: { trigger: 'item', triggerOn:"mousemove",showContent:true },
+          grid: { top:'15%', left: '8%', right: '3%', bottom: '6%', containLabel: true },
+          xAxis: xAxis,
+          yAxis: { name:'累产量', nameGap: 50, nameLocation:'center', type: 'value'},
+          series: 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));
+        if(this.chart!=null) {
+          this.chart.setOption(option);
+          this.chart.resize();
+        }
+      },
+      onOpenChange:function(visible){
+        console.log("onOpenChange", visible);
+        if(visible) {
+          setTimeout(this.readerChart, 100);
+        }
+        else{
+          this.chart.dispose();
+          this.chart = null;
+        }
+      }
+    }
+  })
+</script>
+
+<style lang="less" scoped></style>

vue/src/views/position/test.vue

@@ -25,6 +25,18 @@
       <!--热门搜索历史使用示例，实际应用改样式即可-->
       <QueryHistoryList ref="queryHistoryList" :maxRows="20"></QueryHistoryList>
     </div>
+    <div style="width:1000px;">
+      <a-table :columns="columns" :data-source="data">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'chart'">
+            <div style="height:40px">
+              <!--列表单元格中显示曲线图，数据需要根据业务库整理-->
+              <ChartCell></ChartCell>
+            </div>
+          </template>
+        </template>
+      </a-table>
+    </div>
   </div>
 </template>
 
@@ -33,10 +45,11 @@ import {ref,defineComponent,watch} from "vue";
 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'
 
 export default defineComponent({
   name: 'QueryTest',
-  components: {QueryHistoryList, QueryHistoryComplete},
+  components: {QueryHistoryList, QueryHistoryComplete, ChartCell},
   setup() {
     const route = useRoute();
     const queryHistoryComplete = ref<typeof QueryHistoryComplete>();
@@ -55,10 +68,27 @@ export default defineComponent({
       (queryHistoryComplete.value as any).saveHistory(formState.value.keyString);
     };
 
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name', },
+      { title: 'Age', dataIndex: 'age', key: 'age', width: 80, },
+      { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, },
+      { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true},
+      { title: 'ChartCell', dataIndex: 'chart', key: 'ChartCell', width:160}
+    ];
+
+    const data = [
+      { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer']},
+      { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser']},
+      { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher']},
+    ];
+
     return {
       formState,
       onFinish,
-      queryHistoryComplete
+      queryHistoryComplete,
+
+      columns,
+      data
     };
   }
 });