在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 相关文章推荐
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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代码
2012/07/17 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python提示No module named images的解决方法
2014/09/29 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
利用Python检测URL状态
2019/07/31 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Python的信号库Blinker用法详解
2020/12/31 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
办公室岗位职责
2014/02/12 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
2014年组织部工作总结
2014/11/14 职场文书
个人工作年终总结
2015/03/09 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS