在vue中使用Echarts画曲线图的示例

现实的工作中, 数据不可能写死的，所有的数据都应该通过发送请求进行获取。
所以本项目的需求是请求服务器获得二维数组，并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。
Echarts官方文档：

https://ecomfe.github.io/echarts-doc/public/en/index.html

前端框架使用vue，服务器使用express搭建，交互使用axios。

一.引入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-lineChart-option.js

　　将该曲线图的没有数据的option抽取到async-lineChart-option.js中。

　　此代码在src/echarts/aysnc-lineChart-option.js文件中，代码如下。

export const option = {
  title: { text: '曲线图' },
  backgroundColor: '#FBFBFB',
  tooltip: {
    trigger:'axis'
  },
  xAxis: {
    data: [],
    name: 'id'
  },
  yAxis: {},
  series: [{
    name: 'data',
    type: 'line',
    data: [],
    smooth : true,
    itemStyle: {
      normal: {
 color: 'hotpink'
      }
    }
  }]
}

三.在Curve.vue中请求数据

　   1.从async-lineChart-option.js中引入option

　　2.在methods中添加drawLineChart()方法

　　3.在mounted()钩子函数中调用drawBarChart()

　　4.添加加载动画，在drawLineChart()方法中添加showLoading()和hideLoading()

　　此代码在src/views/Curve.vue中，代码如下：

四.效果图

以上就是在vue中使用Echarts画曲线图的示例的详细内容，更多关于vue Echarts画曲线图的资料请关注考高分网其它相关文章！