vue引入echarts图表

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是他们的类型有限，数据大多都是定制好的，我很难在此基础上进行更改（惹不起）。最终还是选择使用echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

安装echarts依赖 

```

npm install echarts -S

//或者使用淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

```

创建图表

首先需要全局引入

在main.js中

在网上找到的许多案例都是以下的引入方式，但是一直报错

引入失败

```

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

```

在this.$echarts.init（）的前一步打印this.$echarts为undefined，因此判定为引入失败，后续不断的尝试，以下为有效的引入方式

```

const echarts = require('echarts');

Vue.prototype.$echarts = echarts;

```

在Echarts.vue中

```

```

注意： 

在Echarts.js中

```

export default{

name:'hello',

data(){

return{

msg:'Welcome to Your Vue.js App'

}

},

mounted(){

this.drawLine();

},

methods:{

drawLine(){

// 基于准备好的dom，初始化echarts实例

let myChart=this.$echarts.init(document.getElementById('myChart'));

/**

**也可以使用 let myChart=this.$echarts.init(this.$refs.chart);

*/

// 绘制图表

myChart.setOption(

{

title:{text:'在Vue中使用echarts'},

tooltip:{},

xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},

yAxis:{},

series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]});}}}

```

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

结果图

这样一个简单的图表就完成了。

假如在一个大型的项目中，而且数据是非常复杂的情况下，考虑使用组件的形式。

按需引入

由于全局引入会将所有的echarts图表打包，导致体积过大

在Echarts.vue文件中

```

// 引入基本模板

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

// 引入柱状图组件

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

// 引入提示框和title组件

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

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

```

注意：使用 require 而不是 import

以组件的形式用echarts

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便

vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

下面是一个我自己对echarts进行的一个简单的vue组件的集成。

在echarts中 

子组件：

img

注意：要给box2具体的宽高

config中是你要生成的图表的参数

父组件：

img2