图表

base-ui/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "^3.26.1",
+    "echarts": "^5.4.1",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

base-ui/src/views/xiaoshou/xstj/tj.vue

@@ -3,16 +3,19 @@
     <div>
       <h3>{{ name }}</h3>
     </div>
+    <div id="main" style="width: 400px;height: 300px;background-color: bisque;"></div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
   name: 'XiaoshouXstjTj',
   // components: {  },
   data() {
     return {
-      name: '销售数据统计'
+      name: 'jkljljkjlkjlkjlj',
+      myChart:null
     }
   },
   created() {
@@ -22,7 +25,28 @@ export default {
     // this.getList()
   },
   methods: {
-    init() {},
+    init() {
+      // 基于准备好的dom，初始化echarts实例
+      this.myChart = echarts.init('main');
+      // 绘制图表
+      this.myChart.setOption({
+        title: {
+          text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        xAxis: {
+          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [
+          {
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+          }
+        ]
+      });
+    },
     getList() {},
     // 返回
     handleReturn() {