当前位置: 首页 > 编程笔记 >

在vue中使用Echarts画曲线图的示例

夹谷英杰
2023-03-14
本文向大家介绍在vue中使用Echarts画曲线图的示例,包括了在vue中使用Echarts画曲线图的示例的使用技巧和注意事项,需要的朋友参考一下

现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取。
所以本项目的需求是请求服务器获得二维数组,并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。
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画曲线图的资料请关注小牛知识库其它相关文章!

 类似资料:
  • 使用动画曲线 属性列表 在一段 动画剪辑 中,任意动画属性都可以拥有 动画曲线,也就是说,动画剪辑控制着属性如何随时间变化。在 动画视图(左侧)的属性列表区域,罗列出了当前所有参与动画的属性。当动画视图处于关键帧清单模式,每个属性的值是一个条直线轨道,但是在曲线模式下,正在改变的属性值被可视化为曲线图形。无论你用哪种模式查看,曲线一直存在 — 关键桢清单模式只是简单的关键帧数据预览。 在 曲线模式

  • 有没有可能通过它们的方程式在画布中画出曲线呢?如果是,怎么做?假设我有一个数学方程y=0,5*x^2,如何打印方程的图形? 我尝试使用和方法,但未成功。

  • 本文向大家介绍在Vue中使用Echarts实例图的方法实例,包括了在Vue中使用Echarts实例图的方法实例的使用技巧和注意事项,需要的朋友参考一下 前言 由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得。 一、首先要在项目中下载echarts依赖 二、然

  • Highcharts 曲线图 以下实例演示了标示区曲线图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。 配置 使用 yAxis.plotBands 属性来配置标示区。区间范围使用 'from' 和 'to' 属性。颜色设置使用 'color' 属性。标签样式使用 'label' 属性。 配置信息: var yAxis = { title: {

  • 编辑动画曲线 Unity 编辑器提供了几种不同的功能和窗口,用 曲线 来显示和编辑数据。这些用来查看和编辑的方法大体上相同,但是也有一些区别。 动画视图 使用曲线来显示和编辑 动画剪辑 中动画属性随时间变化的值。 动画视图 脚步组件可以含有 动画曲线 类型的成员变量,可以用于各种对象。在检视视图中点击这些变量将弹出 曲线编辑器。 曲线编辑器。 声源 组件使用曲线来控制声源的衰减量(随着距离变化)和

  • 本文向大家介绍在vue中添加Echarts图表的基本使用教程,包括了在vue中添加Echarts图表的基本使用教程的使用技巧和注意事项,需要的朋友参考一下 前言 我们在项目中经常需要使用一些折线图、柱状图、饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自