图表

src/main.js

@@ -22,8 +22,10 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 import Pagination from "@/components/Pagination";
 //自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
+import echarts from "echarts";
 
 // 全局方法挂载
+Vue.prototype.$echarts = echarts;
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime

src/views/index.vue

@@ -426,6 +426,7 @@
         </el-card>
       </el-col>
     </el-row>
+    <div id="box" style="width:100%;height:300px"></div>
   </div>
 </template>
 
@@ -438,10 +439,31 @@ export default {
       version: "3.2.1",
     };
   },
+  mounted() {
+     this.drawLine();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
     },
+      drawLine(){
+        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
+        let myChart = this.$echarts.init(document.getElementById('box'))
+        // 绘制图表
+        myChart.setOption({
+            title: { text: '在Vue中使用echarts' },
+            tooltip: {},
+            xAxis: {　　// x坐标
+                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+            },
+            yAxis: {},　　// y坐标
+            series: [{
+                name: '销量',
+                type: 'bar',　　// 表格类型
+                data: [5, 20, 36, 10, 10, 20]
+            }]
+        });
+    }
   },
 };
 </script>