feat: 新增echart - 未完成

package.json

@@ -12,10 +12,10 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@antv/g2plot": "^2.4.31",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
     "@vueuse/core": "^10.9.0",
     "axios": "^1.6.8",
+    "echarts": "^5.5.0",
     "highlight.js": "^11.9.0",
     "katex": "^0.16.10",
     "load-awesome": "^1.1.0",

src/utils/echartOptions.js

@@ -0,0 +1,163 @@
+import * as echarts from 'echarts';
+let xLabel = [11, 12, 13, 14, 15, 16, 17, 18, 19]
+let goToSchool = [9.019096, 17.795139, 6.467014, 5.746528, 10.16493, 10.112847, 7.75, 6.74, 7.14]
+
+export const areaOptions = {
+  backgroundColor: '#fff',
+  tooltip: {
+    trigger: "axis",
+    // backgroundColor: "#202630",
+    // borderColor: "#202630",
+    // textStyle: {
+    //   color: "#fff",
+    //   fontSize: 12,
+    // },
+    // axisPointer: {
+    //   type: "line",
+    //   lineStyle: {
+    //     type: "solid",
+    //   },
+    // },
+    formatter: function (params) {
+      return params[0].name + 'asda' + ':<br/>' + params[0].value + '万';
+    },
+  },
+
+  // tooltip: {
+  //   trigger: 'axis',
+  //   axisPointer: {
+  //     snap: true,
+  //     type: 'line',
+  //     lineStyle: {
+  //       color: '#1BD5DF', // 线的颜色
+  //       width: 3, // 线宽
+  //       type: 'solid', // 线型
+  //     },
+  //   },
+  //       formatter: function (params) {
+  //     return params[0].name + 'asda' + ':<br/>' + params[0].value + '万';
+  //   },
+  // },
+  grid: {
+    top: '10%',
+    left: 40,
+    right: '5%',
+    bottom: '15%',
+  },
+  xAxis: [{
+    type: 'category',
+    boundaryGap: false,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#e0e6f1'
+      },
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#1F2328',
+        fontSize: 12,
+      },
+      formatter: function (data) {
+        return data + ":00"
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    data: xLabel
+  }],
+  yAxis: [{
+    name: '',
+    nameTextStyle: {
+      color: "#91aac4",
+      fontSize: 16,
+      padding: 10
+    },
+    min: 0,
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+      },
+    },
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "#233653"
+      }
+
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#1F2328',
+        padding: 16
+      },
+      formatter: function (value) {
+        if (value === 0) {
+          return value
+        }
+        return value 
+      }
+    },
+    axisTick: {
+      show: false,
+    },
+  }],
+  series: [
+    {
+    name: '上学',
+    type: 'line',
+    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+    showAllSymbol: true,
+    symbolSize: 5,
+    smooth: true,
+    lineStyle: {
+      normal: {
+        width: 2,
+        color: "rgba(25,163,223,1)", // 线条颜色
+      },
+      borderColor: 'rgba(0,0,0,.4)',
+    },
+    itemStyle: {
+      color: "#b7f9ff",
+      borderColor: "#2185da",
+      borderWidth: 1,
+      shadowColor: 'rgba(22, 137, 229)',
+      shadowBlur: 1
+    },
+    tooltip: {
+      show: true,
+      valueFormatter: function (value) {
+        return value + '元';
+      },
+    },
+    areaStyle: { //区域填充样式
+      normal: {
+        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: "rgba(25,163,223,.3)"
+        },
+        {
+          offset: 1,
+          color: "rgba(25,163,223, 0)"
+        }
+        ], false),
+        shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+      }
+    },
+    data: goToSchool
+  },
+  
+]
+};
+

src/views/analyse/ForecastView.vue

@@ -2,7 +2,10 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { NTabs, NTab } from 'naive-ui';
-import * as G2Plot from '@antv/g2plot';
+// import * as G2Plot from '@antv/g2plot';
+import * as echarts from 'echarts';
+import { areaOptions } from '@/utils/echartOptions'
+// import { Area } from '@antv/g2plot';
 import { useChatStore } from '@/stores/modules/chatStore';
 import { BaseTable, ChatWelcome, RecodeSquareCardItem, TheSubMenu, TheChatView } from "@/components";
 import { ChatBaseCard, ChatAnswer } from '@/components/Chat';
@@ -22,6 +25,7 @@ const answerResult = ref("");
 const textDataSources = ref(null);
 
 const chart = ref({});
+const echartRef = ref({});
 
 // 进出水数据
 const jsTableData = ref([]);
@@ -54,12 +58,6 @@ const handleOpenContent = async ({ id, reason: title }) => {
 
 // 创建图表
 const initLineChat = () => {
-  // chart.value = new Chart({
-  //   container: 'chart',
-  //   autoFit: true,
-  //   width: 500,
-  //   height: 300,
-  // })
   // 准备数据
   const data =
     [
@@ -101,20 +99,9 @@ const initLineChat = () => {
       }
     ]
 
-  const lineChart = new G2Plot.Line('chartContainer', {
-    data,
-    xField: 'time', // 对应你的 x 轴字段
-    yField: 'val', // 对应你的 y 轴字段
-    animation: {
-      appear: {
-        animation: 'path-in',
-        duration: 5000,
-      },
-    },
-  });
-
-  lineChart.render();
-
+   
+    const echart = echarts.init(echartRef.value, 'light');
+    echart.setOption(areaOptions)
 }
 
 // 欢迎 - 问答
@@ -153,9 +140,9 @@ onMounted(() => {
 
     <TheChatView ref="scrollRef" :is-footer="false">
       <ChatWelcome title="您好,我是LibraAI工艺管控助手" card-title="常见处理方案：" :sub-title="[
-        '报警分析功能具备实时监测与预警机制，检测到异常情况推送相关工作人员确保问题及时处理',
-        '报警时间为每小时警报，请大家及时处理'
-      ]" v-if="!textDataSources" :card-content="recommendList" @on-click="handleWelcomeRecommend" />
+      '报警分析功能具备实时监测与预警机制，检测到异常情况推送相关工作人员确保问题及时处理',
+      '报警时间为每小时警报，请大家及时处理'
+    ]" v-if="!textDataSources" :card-content="recommendList" @on-click="handleWelcomeRecommend" />
       <ChatBaseCard v-show="textDataSources">
         <div class="waring-answer-wrapper">
           <dl class="message-inner warning-info_medium ">
@@ -182,9 +169,10 @@ onMounted(() => {
             </div>
           </div>
         </div>
-
-        <div div class="pt-[40px] pb-[20px]" id="chartContainer"></div>
-
+        <div class="echart-warpper">
+          <div id="chartContainer" class="w-[600px] h-[200px]" ref="echartRef"></div>
+        </div>
+        
       </ChatBaseCard>
 
       <ChatAnswer :loading="false" :delay-loading="false" :toggleVisibleIcons="false" :content="answerResult"
@@ -192,4 +180,18 @@ onMounted(() => {
 
     </TheChatView>
   </section>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.echart-warpper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 260px;
+  // padding: 10px;
+  border-radius: 8px;
+  // background: #eee;
+  // border: 1px solid #ccc;
+}
+</style>