在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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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
再说下636单管机
2021/03/02 无线电
PHP 可阅读随机字符串代码
2010/05/26 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery入门知识简介
2010/03/04 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
介绍一下write命令
2012/09/24 面试题
个人简历自我评价
2014/01/06 职场文书
我为自己代言广告词
2014/03/18 职场文书
村班子对照检查材料
2014/08/18 职场文书
员工试用期自我评价
2014/09/18 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
2015年除四害工作总结
2015/07/23 职场文书
Oracle笔记
2021/04/05 Oracle
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android