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


Posted in Javascript onOctober 03, 2020

现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取。
所以本项目的需求是请求服务器获得二维数组,并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。
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中,代码如下:

<script>
  import {option} from '../echarts/aysnc-lineChart-option.js' //从aysnc-lineChart-option.js中引入option

  export default {
    name: 'Curve',

    mounted() {
      //调用drawLineChart()
      this.drawLineChart();
    },
    data () {
      return {

      }
    },
    methods:{

drawLineChart() {
        // 基于准备好的dom,初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制基本图表
        myChart.setOption(option);

        //显示加载动画
        myChart.showLoading();

        //获取数据
        this.$axios.get('/getdate').then(res => {

          //将json对象的所有id数据组成一个数组
          var id = [];
          for(let i = 0;i < res.data.length;i++){
            id.push(res.data[i].id);
          }

          //将json对象中的所有data数据组成一个数组
          var data = [];
          for(let i = 0;i < res.data.length;i++){
            data.push(res.data[i].data);
          }

          setTimeout(()=>{ //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
            myChart.hideLoading(); //隐藏加载动画
            myChart.setOption({
              xAxis: {
                data: id
              },
              series: [{
                 data: data
              }]
            })
          }, 300 )
        })
      },
    },

  };


</script>

四.效果图

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

以上就是在vue中使用Echarts画曲线图的示例的详细内容,更多关于vue Echarts画曲线图的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
vue 虚拟DOM的原理
Oct 03 #Javascript
vue使用video插件vue-video-player的示例
Oct 03 #Javascript
区分vue-router的hash和history模式
Oct 03 #Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 #Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
任意存:BOXFUL
2018/05/21 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
好的演讲稿开场白
2013/12/30 职场文书
马智宇结婚主持词
2014/04/01 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
干部考核工作总结2015
2015/07/24 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis