From 2ba7f00ea233f94f7c1a0cbb2d060d51ee22c0c0 Mon Sep 17 00:00:00 2001
From: nelson <mail_yanpeng@163.com>
Date: Sat, 16 Apr 2022 16:56:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5echarts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  |  1 +
 src/views/stock/chg/Index.vue | 45 +++++++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index d4e49dd..04dc542 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/stock/chg/Index.vue b/src/views/stock/chg/Index.vue
index 048de31..42d6978 100644
--- a/src/views/stock/chg/Index.vue
+++ b/src/views/stock/chg/Index.vue
@@ -1,15 +1,46 @@
 <template>
-  <div>
-    asd
-  </div>
+  <div ref="main" style="width: 100%; height: 400px" />
 </template>
 
-<script>
-export default {
-  name: 'Index'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+//  按需引入 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>