由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知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中
```
<div id="myChart" :style="{width: '300px', height: '300px'}" ref="chart"></div>
```
注意：
在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
网友评论