在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 相关文章推荐
再论Javascript的类继承
Mar 05 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
初步了解javascript面向对象
Nov 09 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 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
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python两个list[]相加的实现方法
2020/09/23 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
企业法人任命书
2015/09/21 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
《称赞》教学反思
2016/02/17 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书