mxc 更新

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     es2021: true,
     node: true,
     jest: true,
+    jquery: true,
   },
   globals: {
     VANTA: 'readonly', //VANTA 已经cdn引入 这里拒绝eslint报错 全局声明一下

package.json

@@ -22,6 +22,7 @@
     "axios": "^1.6.8",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
+    "jquery": "^3.7.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.19",

src/main.ts

@@ -22,6 +22,8 @@ const app = createApp(App)
 import gloablComponent from '@/components/index'
 import 'echarts'
 import ECharts from 'vue-echarts';
+// 导入jquery
+import $ from 'jquery'
 app.use(gloablComponent)
 // 注册仓库
 app.use(pinia)

src/views/portal/LearningPathRecommendations.vue

@@ -4,22 +4,59 @@
 <!-- 学习路径推荐 -->
 
 <script lang="ts" setup>
+// import echarts from 'echarts/types/dist/echarts';
 import { ref } from 'vue';
-const option = ref({
-  xAxis: {
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  },
-  yAxis: {
-    type: 'value'
-  },
+// import * as echarts from 'echarts';
+import 'echarts'
+import ECharts from 'vue-echarts';
+var ROOT_PATH = 'https://echarts.apache.org/examples';
+var chartDom = document.getElementById('main');
+var myChart = echarts.init(chartDom);
+var option;
+
+myChart.showLoading();
+$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
+  myChart.hideLoading();
+  const option = ref({
+    tooltip: {},
+    legend: [
+      {
+        data: graph.categories.map(function (a) {
+          return a.name;
+        })
+      }
+    ],
     series: [
       {
-      data: [150, 230, 224, 218, 135, 147, 260],
-      type: 'line'
+        name: 'Les Miserables',
+        type: 'graph',
+        layout: 'none',
+        data: graph.nodes,
+        links: graph.links,
+        categories: graph.categories,
+        roam: true,
+        label: {
+          show: true,
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        scaleLimit: {
+          min: 0.4,
+          max: 2
+        },
+        lineStyle: {
+          color: 'source',
+          curveness: 0.3
+        }
       }
     ]
+  });
+  myChart.setOption(option);
 });
+option && myChart.setOption(option);
 </script>
 
 <style lang="scss" scoped>

vite.config.ts

@@ -36,3 +36,16 @@ export default ({ command }: any) => {
     },
   }
 }
+
+// const webpack = require('webpack')
+// module.exports = {
+//   configureWebpack: {
+//     plugins: [
+//       new webpack.ProvidePlugin({
+//         $: 'jquery',
+//         jQuery: 'jquery',
+//         'windows.jQuery': 'jquery'
+//       })
+//     ]
+//   }
+// }