ECharts使用—折线图动态加载
最近需求中用到折线图，单线条，多线交错，之前是散点图，用的是另一个 amcharts.js，这个文档也能找的到，回归早本次重点：ECharts
一、首先引入echarts.common.min.js文件，当然开发状态下使用echarts.js可以更便于调试，传送门
二、为图表准备一个dom容器，宽高可以自行定义，
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
三、使用 echarts.init 方法初始化一个echart是实例，并通过setOption方法生成一个简单的折线图，如下：
// 1 单独一个
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
tooltip: { //跟随鼠标显示数值
trigger: 'axis'
},
//保存图片
toolbox: {
feature: {
saveAsImage: {
name:'热度监控', //图片名
pixelRatio:2
}
}
},
/* grid: { //canvas距离边界位置
left: '3%',
bottom:'25%'
},*/
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴不留白
data: dataX.slice(0,10),
axisLabel: { //x坐标展示偏移
interval:0,
rotate:60
},
/* axisLabel: { //刻度偏移
interval: 0,
rotate:0,
fontWeight:'400',
formatter:function(value)
{
return value.split("").join("\n");
}
},
axisTick:{ //隔几个空格显示刻度
interval:1,
}*/
}, // 声明一个 Y 轴，数值轴。
yAxis: {
type: 'value'
},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{
data: [820, 932, 901, 934, 932, 901, 934],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
其中部分属性都附上了注释，实际中会常用的是 saveAsImage ，用于图片的保存，
三、对于多个折线，跟上面的方法大同小异，区别于声明图例组件legend和系列列表赋值，demo如下：
//2 多个折线 /*2*/
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['总池','用户池','马甲池']
},
toolbox: {
feature: {
saveAsImage: {
name:'奖池监控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataX2,
},
yAxis: {
type: 'value'
},
series: [
{
name:'总池',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'用户池',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'马甲池',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
myChart3.setOption(option3);
四、当然我们经常用的过程中 值是需要动态配置的，用setOption给echarts实例动态赋值：
/*1先声明*/
var myChart1 = echarts.init(document.getElementById('main')); myChart1.setOption({
legend: {
data:['销量']
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {
name:'热度监控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: []
}]
});
// 2异步加载数据
$.get('/admin/js/data1.json').done(function (data) {
// 填入数据
myChart1.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX2
},
series: [{
name: '销量',
data: data.data1
}]
}); });
具体参数就不在解释，可以参考API中配置的说明，自己尝试几下就知道对应的意思了，
五、动态加载的时候，请求需要时间，这个过程中可以显示loading动画，也是有提供的，
myChart1.showLoading();
这个方法我在声明myChart1，初始化之后直接调用，动态配置获得请求后，在调用
myChart1.hideLoading();
隐藏动画，举个栗子吧：
$.ajax({
type: "get",
url: 'demo.json',
async: true,
dataType: 'json',
success: function(res) {
if(res.status == 1 && res.data){
var data = res.data;
myChart3.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX1
},
series: [{
name:'总池',
type:'line',
stack: '总量',
data:data.dataY1
}]
});
}else if(!data){
messager('danger','暂无数据')
}else{
messager('danger',res.msg)
}
},
error: function(error) {
messager('danger',error.statusText)
},
complete:function () {
myChart3.hideLoading();
}
});
叨逼叨：这里series里有参数项stack，多个线条时有用，如果设置相同的stack值，后一个系列的值会在前一个系列的值上相加。
当然，这只是冰山一角，只是自己刚好需要这点而已，更多强大的功能暂时没有用到~~~~ ^_^
ECharts使用—折线图动态加载的更多相关文章
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- echarts迁移图动态加载
迁移图 获取迁移城市的经纬度 可以调用高德的接口,实现根据地名找寻经纬度的方法 #!/usr/bin/env python3 #-*- coding:utf-8 -*- ''' 利用高德地图api实现 ...
- 【转】Echarts的使用以及动态加载数据
一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新 ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
- Unity使用脚本进行批量动态加载贴图
先描述一下我正在做的这个项目,是跑酷类音游. 那么跑酷类音游在绘制跑道上的时候,就要考虑不同的砖块显示问题.假设我有了一个节奏列表,那么我们怎么将不同的贴图贴到不同的砖块上去呢? 我花了好几个小时才搞 ...
- echarts系列之动态加载数据
1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
随机推荐
- 第一次oo博客作业--表达式求导
(1)说实话我这部分真的不知道写些什么,因为我只有第三次作业写了两个类,前两次都是一个类,一个类的好处可能也就是写起来比较方便(不用抽象什么共性了,直接c语言莽过去),缺点很多,架构不清晰,可读性不高 ...
- linux 安装配置Jenkins
1.首先准备java环境,安装JDK 2.下载jenkins至Linux服务器 下载地址:https://wiki.jenkins-ci.org/display/JENKINS/Installing+ ...
- unique_ptr
[unique_ptr] unique_ptr 不共享它的指针.它无法复制到其他 unique_ptr,无法通过值传递到函数,也无法用于需要副本的任何标准模板库 (STL) 算法.只能移动unique ...
- Jenkins解析日志（log-parser-plugin）
Jenkins打包机打包时产生了大量的日志,当报错时,不方便查看error日志 因为日志量太大,查看全部log的时候整个web页面会卡死,所以引用log-parser-plugin可以增加过滤条件显示 ...
- C++ map 使用erase在windows下崩溃，在linux下没有问题的原因
注意:此程序在win环境下会出现上述描述的问题:在mac环境下第一种方式是正常运行的.Map.erase有3个重载函数: void erase(iterator position); size_typ ...
- Unity2018.3全新Prefab预制件系统深入介绍视频教程+PPT+Demo源码
Unity在2018.3推出了重新设计的Prefab预制件系统.这一全新的设计终于为一个长达十年的问题画上了完美的句号, 这个问题就是:“什么时候Unity可以提供嵌套式的预制件系统,俗称Nested ...
- sqlserver2017 SSAS配置远程访问不成功的问题
sqlserver2017 SSAS通过IIS配置远程访问一直访问不成功的解决办法: 出现这个问题的原因从微软给出的更新包中说的就是: 从 SQL Server 2017 开始,Analysis Se ...
- python的argpare和click模块详解
一.argparse模块 1.模块说明 # argparse是python的标准库中用来解析命令行参数的模块,用来替代已经过时的optparse模块,argparse能够根据程序中的定义的sys.ar ...
- 理解javascript中的立即执行函数(function(){})()
之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefine ...
- python json.dumps()函数输出json格式，使用ensure_ascii参数对中文输入的支持
在python使用过程中,输入中文,不能正常的输出,可以使用ensure_ascii参数来解决不能输入中文的问题 代码块: import json friends={"name": ...