vue 表格中有列需要异步加载_在Vue项目中使用Echarts(四): 使用vue-resource实现异步加载数据...

一.前言

说明: 之前的三篇文章的代码中, 在.vue组件中, 我将绘图的方法全部都写在了mounted钩子函数中, 这样写其实是不规范的. 应该将方法写在methods中, 再在mounted中调用methods中的方法. 下面的代码抒写我会尽量规范化抒写, 如果有不对的地方, 希望读者能够指正! 谢谢!

现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts(一): 在Vue中引入Echarts中的数据提取出来, 放入到src/data/asyncBarChart.json文件中,请求该文件获取数据.

//src/data/asyncBarChart.json

{

"product" : [5, 20, 36, 10, 10, 20]

}

二. 实现异步加载数据

(一)引入vue-resource

通过npm下载vue-resource

//命令行中输入

npm install vue-resource --save

在main.js中引入vue-resource并注册

// main.js

import VueResource from 'vue-resource'

Vue.use(VueResource)

(二)设置aysnc-barChart-option.js

将该柱状图的没有数据的option抽取到async-barChart-option.js中, 代码如下:

// src/echarts/aysnc-barChart-option.js

export const option = {

title: { text: '简单饼状图'