网站地图    收藏   

主页 > 前端 > vue教程 >

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

来源:自学PHP网    时间:2020-10-03 17:30 作者:小飞侠 阅读:

[导读] 在vue中使用Echarts画曲线图的示例...

今天带来在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画曲线图的示例全部内容,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论