引入echarts

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.26.1",
+    "echarts": "^5.3.2",
     "element-plus": "^2.1.9",
     "save": "^2.4.0",
     "vue": "^3.2.25",

src/views/stock/chg/Index.vue

@@ -1,15 +1,46 @@
 <template>
-  <div>
+  <div ref="main" style="width: 100%; height: 400px" />
-    asd
-  </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { ref, onMounted } from 'vue'
-  name: 'Index'
+//  按需引入 echarts
+import * as echarts from 'echarts'
+const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
+onMounted(
+  () => {
+    init()
+  }
+)
+const init = () => {
+  // 基于准备好的dom，初始化echarts实例
+  const myChart = echarts.init(main.value)
+  // 指定图表的配置项和数据
+  const option = {
+    title: {
+      text: 'ECharts 入门示例'
+    },
+    tooltip: {},
+    legend: {
+      data: ['销量']
+    },
+    xAxis: {
+      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20]
+      }
+    ]
+  }
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 </style>