商家销售统计组件（横向柱状图）

路由的走通

我们在src文件夹下的views文件夹里面开发组件

在以上的这个组件里面调用下面的组件

我们就在seller.vue里面写具体的代码，也就是在这个组件里面用echarts将图形展示出来。

我们先将上的组件跑通，也就是先创建路由，在浏览器可以通过url走到这个SellerPage.vue 这个组件里面。

路由一般是写在router文件夹下的index.js里面的。

但是项目的入口是main.js。所以这个router里面的js文件要在main,js里面注册
注册的方式是
先导入

之后注册

以上配置了，项目一启动，浏览器输入url，那么就会先走main.js。因为注册了router文件，就会到router文件夹下找路径

就会在下面的list集合里面找

现在我们就在这个集合里面写路径

在组件里面写一些字

启动项目

写一个全局的样式，并且在main.js 里面引入

在组件里面开发图形

已经在main.js里面注册了echarts，所以在组件里面直接创建对象就可以了。

vue项目里面导入echarts

以上只是导入了我们下载的echarts.js
还要配置到我们的项目里面，在main.js里面进行配置

在组件里面使用导入的echarts

在vue文件里面，有一个方法的属性，methods ，这个里面就是写很多的方法，其中我们要创建图形，我们可以使用的3个方法是

initChart ()方法

在这个方法里面就是初始化echarts对象，这样初始化
创建一个div

<div class="com-chart" ref="seller_ref"></div>

      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')

getData () 获取服务器的数据

   // {
    data: ret }的意思是将返回的数据进行解构，也就是返回的数据都放到ret里面
      const {
    data: ret } = await this.$http.get('seller')
      // 将返回的数据放到allData变量里面
      this.allData = ret