在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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
JavaScript中this详解
Sep 01 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
js如何打印object对象
2015/10/16 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python 打印中文字符的三种方法
2018/08/14 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
PyQt5响应回车事件的方法
2019/06/25 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
经典的毕业生自荐信范文
2014/04/14 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书