在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 function、指针及内置对象
Feb 19 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
JS实现简单日历特效
2020/01/03 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
浅谈python import引入不同路径下的模块
2017/07/11 Python
python 数据的清理行为实例详解
2017/07/12 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python中时间模块的基本使用教程
2019/05/14 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
安全生产计划书
2014/05/04 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL