echarts vue 酷炫图_Vue怎么使用Echarts创建图表

摘要：在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下：https://echarts.baidu.com/index.html，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。

本文流程：

1.安装插件2.引入Echarts3.创建图表4.修改样式5.接入数据

一.安装插件

方法一：npm安装Echartsnpm install echarts -S

方法二：cnpm安装Echarts

1.首先我们需要安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org

2.然后cnpm install echarts -S

二.引入Echarts

方法一：全局引入

打开main.js文件引入Echartsimport echarts from 'echarts'

然后将echart添加到vue的原型上，这样就可以全局使用了Vue.prototype.$echarts = echarts

方法二：局部引入

全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图

// 引入基本模板

let echarts = require('echarts/lib/echarts')

// 引入柱状图组件

require('echarts/lib/chart/bar')

// 引入提示框和title组件

require('echarts/lib/component/tooltip')

require('echarts/lib/component/title')

这里require直接从 node_modules 中查找文件位置进行引入

三.创建图表

当你安装完插件和在页面里面引入图表之后，那么恭喜你可以创建图表了~