要做成页面只传入数据,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数据的更多相关文章

  1. echart动态加载数据

    <!DOCTYPE html> <head>     <meta charset="utf-8">     <title>EChar ...

  2. 动态生成js数据Response.Expires=1440竟然无效?

    项目当中有一些数据,比如多语言翻译,要求做语言包,起初当然是做成i18n.js文件,但是每个阶段版本更新都会增加一些key,那么发布的时候只能给<script>的src增加?2018091 ...

  3. 抓取js动态生成数据

    最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...

  4. 爬虫之抓取js生成的数据

    有很多页面,当我们用request发送请求,返回的内容里面并没有页面上显示的数据,主要有两种情况,一是通过ajax异步发送请求,得到响应把数据放入页面中,对于这种情况,我们可以查看关于ajax的请求, ...

  5. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  6. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  7. 【Java EE 学习 77 上】【数据采集系统第九天】【通过AOP实现日志管理】【通过Spring石英调度动态生成日志表】【日志分表和查询】

    一.需求分析 日志数据在很多行业中都是非常敏感的数据,它们不能删除只能保存和查看,这样日志表就会越来越大,我们不可能永远让它无限制的增长下去,必须采取一种手段将数据分散开来.假设现在整个数据库需要保存 ...

  8. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  9. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

随机推荐

  1. springboot-条件化注解

    在项目中,有时会遇到我们的Configuration.Bean.Service等等的bean组件需要依条件按需加载的情况.那么Spring Boot怎么做的呢?它为此定义了许多有趣的条件,当我们将它们 ...

  2. (转)EASYUI+MVC4通用权限管理平台

    原文地址:http://www.cnblogs.com/hn731/archive/2013/07/15/3190947.html 通用权限案例平台在经过几年的实际项目使用,并取得了不错的用户好评.在 ...

  3. git手动解决内容冲突

    <span style="font-size:18px;">git checkout -b lab4 origin/lab4 git merge lab3</sp ...

  4. 软工作业WordCount

    github项目传送门:https://github.com/zzh010/My-wc 一.WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命 ...

  5. [转]解读Unity中的CG编写Shader系列1——初识CG

    CG=C for Graphics  用于计算机图形编程的C语言超集 前提知识点: 1.CG代码必须用 CGPROGRAM ... ENDCG括起来 2.顶点着色器与片段着色器的主函数名称可随意,但需 ...

  6. Logic Controller(逻辑控制器)

    逻辑控制器主要用来控制采样器的执行顺序,仅对其子节点的逻辑控制器和采样器其作用. 1.Simple Controller(简单控制器) 简单控制器主要用来组织其他逻辑控制器和采样器,提供了一个块的结构 ...

  7. php代码审计10审计会话认证漏洞

    挖掘经验:遇到的比较多的就是出现在cookie验证上面,通常是没有使用session来认证,直接将用户信息保存在cookie中      Session固定攻击:黑客固定住目标用户的session i ...

  8. 洛谷P3254 圆桌问题(最大流)

    传送门 一道良心啊……没那么多麻烦了…… 从$S$向所有单位连边,容量为单位人数,从所有桌子向$T$连边,容量为桌子能坐的人数,从每一个单位向所有桌子连边,容量为$1$,然后跑一个最大流,看一看$S$ ...

  9. 2. Shell编程第二讲

    (1) 条件测试: test   [ 命令 test 或 [ 可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为1(注 ...

  10. centos虚拟机设置静态ip

    1.虚拟机网络配置设置为桥接模式 2.设置配置文件: vi /etc/sysconfig/network-scripts/ifcfg-ens33 DEVICE=ens33 HWADDR=:0c::c3 ...