由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知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
在Echarts.vue中<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
JavaScript
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'))
// 绘制图表
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文件中
JavaScript
// 引入基本模板
let echarts = 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中
子组件:
props部分是我接收到的参数,父组件获取数据分发,data是父组件分发给echarts的数据源。
父组件:
如果在大型的项目,而且图表又非常的多,那么vuex少不了。如果把数据集中存储到了vuex中,echarts组件再从vuex中获取数据,我们也能随时保存获取的结果,对这些数据可以添加收藏也可以加入缓存中,下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~