使用echarts 简单绘制图表

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
+    "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "lodash": "^4.17.15",
     "vue": "^2.6.11",

src/components/report/report.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="report">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>数据管理</el-breadcrumb-item>
+        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <el-card class="box-card">
+        <div id="main"></div>
+      </el-card>
+    </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import _ from 'lodash'
+
+  export default {
+  props: {
+  },
+  data () {
+    return {
+      options: {
+        title: {
+          text: '用户来源'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#E9EEF3'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            boundaryGap: false
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ]
+      }
+    }
+  },
+  methods: {},
+  mounted () {
+    const chart = echarts.init(document.querySelector('#main'))
+    this.$http.get('reports/type/1').then(response => {
+      const res = response.data
+      console.log(res.data, this.options)
+      const r = _.merge(res.data, this.options)
+      console.log(r)
+      chart.setOption(r)
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+  #main{
+    width: 750px;
+    height: 400px;
+  }
+</style>

src/router/router.js

@@ -11,6 +11,7 @@ import params from '../components/goods/params'
 import goods from '../components/goods/goods'
 import goodsEdit from '../components/goods/edit'
 import order from '../components/order/order'
+import report from '../components/report/report'
 
 Vue.use(VueRouter)
 
@@ -30,7 +31,8 @@ const routes = [
       { path: '/params', component: params },
       { path: '/goods', component: goods },
       { path: '/goods/add', component: goodsEdit },
-      { path: '/orders', component: order }
+      { path: '/orders', component: order },
+      { path: '/reports', component: report }
     ]
   }
 ]

yarn.lock

@@ -3111,6 +3111,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.npm.taobao.org/echarts/download/echarts-4.8.0.tgz?cache=0&sync_timestamp=1590400613192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
+  integrity sha1-ssHPuSKbE9No7hBPyO6mALV01MQ=
+  dependencies:
+    zrender "4.3.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -8711,3 +8718,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npm.taobao.org/zrender/download/zrender-4.3.1.tgz?cache=0&sync_timestamp=1588759616979&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
+  integrity sha1-uviqbcgYei+BlpLX1fm+36K5D6M=