echarts的学习（十）vue项目中，单独图表组件的开发，商家销售统计组件

单独图表组件的开发

• 商家销售统计组件（横向柱状图）
• • 路由的走通
  • 在组件里面开发图形
  • • vue项目里面导入echarts
    • 在组件里面使用导入的echarts
    • • initChart ()方法
      • getData () 获取服务器的数据
  • echarts主题的配置
  • 总结

之前已经创建了vue项目，并且将基本的配置都配置了，比如路由，跨域都配置好了，现在就开始开发组件了。

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

路由的走通

在这里插入图片描述

我们在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

在这里插入图片描述

echarts主题的配置

在这里插入图片描述

以上是先引入

在组件里面初始化echarts的时候使用

在这里插入图片描述

总结

在这里插入图片描述

在一个组件里面就将图形的展示的代码都写出来

在这里插入图片描述

在这里插入图片描述

1 一加载这个页面，就先走mounted（）里面的方法

在这里插入图片描述

2 而以上的方法都在methods（）里面

在这里插入图片描述

initChart ()里面的方法就是在div里面画出图形

画出图形之后，就调用getDate()函数从后台获取数据，将数据放到变量里面，之后调用更新图形的方法，就会将数据放到图形里面了