现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取。
所以本项目的需求是请求服务器获得二维数组,并生成曲线图。曲线图的横纵坐标均从获得的数据中取得。
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,下面是具体步骤和自