在Vue中使用echarts

在项目中需要对数据进行可视化处理, 然后echarts非常强大, 在vue中引用echarts分析图表数据

1.首先需要vue-cli搭建，安装echarts依赖

npm install charts -S

或者使用淘宝镜像：

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

使用cnpm安装echarts

cnpm install echarts -S

2.在main.js引入echarts

3.创建echarts.vue的页面，在页面上使用echarts

<div> <h3>可视化图表</h3> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div>

</template>

export default {

name: 'echart',

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] }] }); } } }

</script>

4.页面上显示：

按需引入

由于全局引入会将所有的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中

子组件：

props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。

父组件：

如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用