Echart 动态生成series数据
要做成页面只传入数据,js生成图表,如下图
下面是js代码
var LineChart = function (ID, title, axisData,seriesData) {
var myChart = echarts.init(document.getElementById(ID));
var newData = [];
var legendData = [];
for (var i = 0; i < seriesData.length; i++) {
var lineItem = new serLineItem();
lineItem.name = seriesData[i].name;
legendData.push(seriesData[i].name);
lineItem.data = seriesData[i].data;
newData.push(lineItem);
}
var option = {
title: {
text: title,
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData,
bottom:0
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: axisData
},
yAxis: {
type: 'value'
},
series: newData
};
myChart.setOption(option);
} var serLineItem = function () {
return {
name: '',
type: 'line',
data: []
}
}
前台页面调用
引入相关的js文件
$(document).ready(function () {
var axisData= ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var seriesData = [{ name: '直接访问', data: [320, 302, 301, 334, 390, 330, 320] },
{name: '邮件营销', data: [120, 132, 101, 134, 120, 230, 210]},
{name: '联盟广告', data: [220, 182, 191, 234, 290, 330, 310]},
{name: '视频广告', data: [150, 212, 201, 154, 190, 330, 410]},
{ name: '搜索引擎', data: [820, 832, 901, 934, 1290, 1330, 1320] }];
LineChart('main', '访问', axisData, seriesData);
}
Echart 动态生成series数据的更多相关文章
- echart动态加载数据
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>EChar ...
- 动态生成js数据Response.Expires=1440竟然无效?
项目当中有一些数据,比如多语言翻译,要求做语言包,起初当然是做成i18n.js文件,但是每个阶段版本更新都会增加一些key,那么发布的时候只能给<script>的src增加?2018091 ...
- 抓取js动态生成数据
最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...
- 爬虫之抓取js生成的数据
有很多页面,当我们用request发送请求,返回的内容里面并没有页面上显示的数据,主要有两种情况,一是通过ajax异步发送请求,得到响应把数据放入页面中,对于这种情况,我们可以查看关于ajax的请求, ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- 百度echart如何动态生成图表
百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...
- 【Java EE 学习 77 上】【数据采集系统第九天】【通过AOP实现日志管理】【通过Spring石英调度动态生成日志表】【日志分表和查询】
一.需求分析 日志数据在很多行业中都是非常敏感的数据,它们不能删除只能保存和查看,这样日志表就会越来越大,我们不可能永远让它无限制的增长下去,必须采取一种手段将数据分散开来.假设现在整个数据库需要保存 ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
- js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议5: 使用int?来确保值类型也可以为null
建议5: 使用int?来确保值类型也可以为null 基元类型为什么需要为null?考虑两个场景: 1)数据库中一个int字段可以被设置为null.在C#中,值被取出来后,为了将它赋值给int类型,不得 ...
- 【Head First Java 读书笔记】(五)编写程序
第五章 编写程序 伪码:伪码能帮你专注于逻辑而不需要顾虑到程序语法 测试码:测试用的程序代码 真实码:实际代码 伪码 伪码是介于真正的java程序与正常英语之间的一种语言.伪码大致包括3部分:实例变量 ...
- LibreOJ 6002 最小路径覆盖(最大流)
题解:最小路径覆盖=总点数减去最大匹配数,拆点,按照每条边前一个点连源点,后一个点连汇点跑最大流,即可跑出最大匹配数,然后减一减就可以了~ 代码如下: #include<queue> #i ...
- Oracle 定时任务讲解
前几天,公司的job调度出现了问题,由于权限管的严,没有查看oracle 一些重要的数据字典,后面联系DBA,是由于数据库切换到备机时,参数设置不对,导致db job没有正常调度. 今天刚好有时间,想 ...
- NSEnumerator迭代器
前言 Xcode 7 对系统中常用的一系列容器类型都增加了泛型支持(),有了泛型后就可以指定容器类中对象的类型了. 假如向泛型容器中加入错误的对象,编译器会报警告. __covariant:协变性,子 ...
- 6w6:第六周程序填空题3
描述 下面的程序输出结果是: A::Fun A::Do A::Fun C::Do 请填空: #include <iostream> using namespace std; class A ...
- 洛谷P4014 分配问题(费用流)
传送门 可以把原图看做一个二分图,人在左边,任务在右边,求一个带权的最大和最小完美匹配 然而我并不会二分图做法,所以只好直接用费用流套进去,求一个最小费用最大流和最大费用最大流即可 //minamot ...
- SpringMVC中静态文件的引用
1.在WebRoot目录下创建 resources文件,里面可以放入css文件 2.在SpringMVC中的配置文件dispatcherServlet-servlet.xml中加入 <!-- 将 ...
- MyBatis介绍及使用
一.介绍: 1.MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 2.和数据库打交道的技术有: 原生的JDBC技术--->Spring的JdbcTe ...
- 降维之主成分分析法(PCA)
一.主成分分析法的思想 我们在研究某些问题时,需要处理带有很多变量的数据,比如研究房价的影响因素,需要考虑的变量有物价水平.土地价格.利率.就业率.城市化率等.变量和数据很多,但是可能存在噪音和冗余, ...