所有回答(1)
你解决了吗？
&&&您需要以后才能回答，未注册用户请先。ECharts如何动态添加series(使用x1,y2的新折线)和原来的并存，不覆盖已有的series，实现对比
你好，想跟你请教个问题：ECharts如何动态添加series(使用x1,y2的新折线)和原来的并存，不覆盖已有的series，实现对比？
不知道怎么动态添加y2轴，以及添加1条新的series,并使用x1,y2轴，请各位能够给个例子或者思路
比如我原来的series
type : 'value'
series : [
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
] 使用setOption，需要写成
type : 'value'
type : 'value'
series : [
//原有series
name:"销量",
type:"bar",
data:[15, 20, 40, 10, 10, 20]
//新加series
name : 'test',
type : 'bar',
yAxisIndex : 1,
data : [15, 220, 340, 110, 110, 120]
这么写可以实现，但是需要重新把原有的series再写一遍，请问有什么方法可以实现只添加新的series实现和原有的series并存么
series : [
//不写原有的series对象
name : 'test',
type : 'bar',
yAxisIndex : 1,
data : [15, 220, 340, 110, 110, 120]
//只写我需要添加的新series，和原来的series并存
万能接口setOption
--- 共有 2 条评论 ---
: 默认就会做merge操作的，第二次传入是无需改动的系列传个{}就行，series:[{}, {...new serie..}]
感谢你的回答，我又补充了一下问题，请看一下，
具体怎么用的呢？可以写详细点吗
你好，动态添加series,你是怎么实现的呢？谢谢
--- 共有 2 条评论 ---
: 能麻烦你把那个function 写一下吗？series:function(){}()我在option里的series:function写了个for循环添加，但是不能成功。帮帮忙吧
ajax返回series，覆盖原来的series
我是这么写的，你可以试试行不行
option.series.push({
name: '倒送电量',
type: 'bar',
stack: '总量',
itemStyle: {
show: true,
position: 'top'
data: dsdl
myChart.setOption(option);本文讲的是java使用Echarts实现动态曲线图表示例，
下面就详述一下实现过程吧（注：相较于原网页我隐去了很多内容，本实现过程就只专注于Echarts图表实现）
HTML页面部分，代码如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD HTM
下面就详述一下实现过程吧（注：相较于原网页我隐去了很多内容，本实现过程就只专注于Echarts图表实现）
HTML页面部分，代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&!-- 在IE运行最新的渲染模式 --&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&!-- 初始化移动浏览显示
&meta name="Author" content="Dreamer-1."&
&script type="text/javascript" src="js/jquery-1.12.3.min.js"&&/script&
&script type="text/javascript" src="mon.min.js"&&/script&
&title&- 观测数据 -&/title&
&!-- 显示Echarts图表 --&
&div style="height:410min-height:100margin:0" id="main"&&/div&
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//图表标题
text: '过去五天数据图表'
tooltip: {
trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
控制提示框内容输出格式
formatter: '{b0}&br/&&font color=#FF3333&&●&&/font&{a0} : {c0} ℃ ' +
'&br/&&font color=#53FF53&●&&/font&{a1} : {c1} % ' +
'&br/&&font color=#68CFE8&&●&&/font&{a3} : {c3} mm ' +
'&br/&&font color=#FFDC35&&●&&/font&{a4} : {c4} m/s ' +
'&br/&&font color=#B15BFF&&&&&●&&/font&{a2} : {c2} hPa '
dataZoom: [
type: 'slider',
//支持鼠标滚轮缩放
//默认数据初始缩放范围为10%到90%
type: 'inside',
//支持单独的滑动条缩放
//默认数据初始缩放范围为10%到90%
//图表上方的类别显示
show:true,
data:['温度（℃）','湿度（%）','雨量（mm）','风速（m/s）','压强（hPa）']
'#FF3333',
//温度曲线颜色
'#53FF53',
//湿度曲线颜色
'#B15BFF',
//压强图颜色
'#68CFE8',
//雨量图颜色
//风速曲线颜色
toolbox: {
//工具栏显示
show: true,
feature: {
saveAsImage: {}
//显示“另存为图片”工具
type : 'category',
//先设置数据值为空，后面用Ajax获取动态数据填入
//Y轴（这里我设置了两个Y轴，左右各一个）
//第一个（左边）Y轴，yAxisIndex为0
type : 'value',
name : '温度',
/* max: 120,
min: -40, */
axisLabel : {
formatter: '{value} ℃'
//控制输出格式
//第二个（右边）Y轴，yAxisIndex为1
type : 'value',
name : '压强',
scale: true,
axisLabel : {
formatter: '{value} hPa'
series : [
//系列（内容）
name:'温度（℃）',
type:'line',
//折线图表示（生成温度曲线）
symbol:'emptycircle',
//设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
//数据值通过Ajax动态获取
name:'湿度（%）',
type:'line',
symbol:'emptyrect',
name:'压强（hPa）',
type:'line',
symbol:'circle',
//标识符号为实心圆
yAxisIndex: 1,
//与第二y轴有关
name:'雨量（mm）',
type:'bar',
//柱状图表示
//barMinHeight: 10,
//柱条最小高度，可用于防止某数据项的值过小而影响交互
/* label: {
show: true,
position: 'top'
name:'风速（m/s）',
type:'line',
symbol:'emptydiamond',
myChart.showLoading();
//数据加载完之前先显示一段简单的loading动画
var tems=[];
//温度数组（存放服务器返回的所有温度值）
var hums=[];
//湿度数组
var pas=[];
//压强数组
var rains=[];
//雨量数组
var win_sps=[];
//风速数组
var dates=[];
//时间数组
//使用JQuery内置的Ajax方法
type : "post",
//post请求方式
async : true,
//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "ShowInfoIndexServlet",
//请求发送到ShowInfoIndexServlet处
data : {name:"A0001"},
//请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
dataType : "json",
//返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result != null && result.length & 0) {
for(var i=0;i&result.i++){
tems.push(result[i].tem);
//挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
hums.push(result[i].hum);
pas.push(result[i].pa);
rains.push(result[i].rain);
win_sps.push(result[i].win_sp);
dates.push(result[i].dateStr);
myChart.hideLoading();
//隐藏加载动画
myChart.setOption({
//载入数据
data: dates
//填入X轴数据
//填入系列（内容）数据
// 根据名字对应到相应的系列
name: '温度',
data: tems
name: '湿度',
data: hums
name: '压强',
name: '雨量',
data: rains
name: '风速',
data: win_sps
//返回的数据为空时显示提示信息
alert("图表请求数据为空，可能服务器暂未录入近五天的观测数据，您可以稍后再试！");
myChart.hideLoading();
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败，可能是服务器开小差了");
myChart.hideLoading();
myChart.setOption(option);
//载入图表
Servlet部分，客户端请求提交到 ShowInfoIndex 处，先在 web.xml 里配置一下Servlet映射：
&?xml version="1.0" encoding="UTF-8"?&
&web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"&
&display-name&BlogExample&/display-name&
&servlet-name&ShowInfoIndexServlet&/servlet-name&
&servlet-class&EchartsExample.ShowInfoIndexServlet&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&ShowInfoIndexServlet&/servlet-name&
&url-pattern&/ShowInfoIndexServlet&/url-pattern&
&/servlet-mapping&
&/web-app&
关于ShowInfoIndexServlet，简单说一下请求-响应中间的过程：
客户端发送图表请求给Servlet，Servlet接收到请求后先获取客户端请求查看的气象站名称，然后从数据库（SqlServer2005 Express版）中获取最近五天内该气象站所有的采集数据（装在List中），再用Gson工具将该List转换成Json对象返回给客户端，客户端接收到返回的Json对象后对其进行解析并将相应数据填入Echarts中，然后作显示；
其中Record.java是只对外提供get/set方法的用于封装数据的普通实体类，DBUtil.java是JDBC方式下专门提供Connection、Statement、ResultSet等的数据库工具类。
（原本的连接数据库并获取数据过程需经过业务逻辑层与数据访问层，较为复杂，这里隐去这两层，直接在Servlet内连接数据库并拿取数据）
Ps：墙裂建议使用PreparedStatement进行参数化查询，这样可以有效避免SQL注入！
ShowInfoIndexServlet代码如下：
其中用到了Google的Gson工具包（提供java-json对象间的转换，下载后放在 WRB-INF/lib 目录下即可）
下载地址：/artifact/com.google.code.gson/gson
package EchartsE
import java.io.IOE
import java.sql.C
import java.sql.PreparedS
import java.sql.ResultS
import java.sql.SQLE
import java.text.SimpleDateF
import java.util.*;
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import com.google.gson.G
* 响应观测记录展示页的Echarts图表数据请求（使用json格式返回客户端需要的数据）
* @author zhong
public class ShowInfoIndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//设定客户端提交给servlet的内容按UTF-8编码
response.setCharacterEncoding("UTF-8");
//设定servlet传回给客户端的内容按UTF-8编码
response.setContentType("text/charset=UTF-8");
//告知浏览器用UTF-8格式解析内容
String name = request.getParameter("name");
//获取台站名参数
//获取当天在内的五天以前的0点格式字符串（用于数据库查询）
cal = Calendar.getInstance();
cal.add(Calendar.DATE, -4);
//获取当天在内的五天以前的日期时间
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd 00:00:00");
//设定日期格式
String fiveDaysAgoStr = sdf1.format(cal.getTime());
//将五天前的日期时间按指定格式转换成字符串
//获取当前时间并将其转换成指定格式的字符串（用于数据库查询）
Date now = new Date();
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowStr = sdf2.format(now);
//System.out.println(nowStr);
//======================================连接数据库操作============================================================================================
* 连接数据库并获取五天内该名称的气象站的所有采集数据
List&Record& records = new ArrayList&Record&();
//用一个ArrayList来盛装封装了各气象数据的对象
Connection conn =
PreparedStatement pstmt =
ResultSet rs =
conn = DBUtil.getConnection();
//获取与数据库的连接
String sql = "select * from alldata where data_taizhan_num = ? and data_date &= ? and data_date &= ? order by data_date asc";
//初始化SQL查询语句
pstmt = conn.prepareStatement(sql);
//创建preparedStatement语句对象
pstmt.setString(1, name);
//设定查询参数
pstmt.setString(2, fiveDaysAgoStr);
pstmt.setString(3, nowStr);
rs = pstmt.executeQuery();
//获取查询到的结果集
while (rs.next()) {
//封装Record对象
Record r = new Record();
r.setTaizhan_num(rs.getString(1));
r.setDate(rs.getTimestamp(2));
r.setTem(rs.getString(3));
r.setHum(rs.getString(4));
r.setPa(rs.getString(5));
r.setRain(rs.getString(6));
r.setWin_dir(rs.getString(7));
r.setWin_sp(rs.getString(8));
//将时间转换成给定格式便于echarts的X轴日期坐标显示
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(rs.getTimestamp(2));
r.setDateStr(str);
//System.out.println(r.getTem()+" | "+r.getHum()+" | "+r.getPa()+" | "+r.getRain()+" | "+r.getWin_dir()+" | "+r.getWin_sp());
records.add(r);
//将封装好的Record对象放入列表容器中
} catch (SQLException e) {
System.out.println("查询出错，操作未完成!");
e.printStackTrace();
} finally {
//查询结束后释放资源
DBUtil.close(rs);
DBUtil.close(pstmt);
DBUtil.close(conn);
//======================================连接数据库操作（完）============================================================================================
//将list中的对象转换为Json格式的数组
Gson gson = new Gson();
String json = gson.toJson(records);
//System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/ charset=utf-8");
response.getWriter().write(json);
alldata表部分数据截图：
Record类代码如下：
package EchartsE
import java.sql.*;
* 封装气象数据信息
* @author zhong
public class Record {
private String taizhan_
private String win_
private String win_
private String dateS
//观测日期（用于Echarts显示格式）
//观测日期（原始格式）
* 获取观测日期（用于echarts图表展示）；
* @return 观测日期值
public String getDateStr() {
return dateS
* 设置观测日期（用于echarts图表展示）；
* @param dateStr 待设置观测日期值
public void setDateStr(String dateStr) {
this.dateStr = dateS
* 获取产生该观测记录的台站名称；
* @return 台站名称
public String getTaizhan_num() {
return taizhan_
* 设置产生该观测记录的台站名称；
* @param taizhan_num 待设置台站名称
public void setTaizhan_num(String taizhan_num) {
this.taizhan_num = taizhan_
* 获取温度；
* @return 温度值
public String getTem() {
* 设置温度；
* @param tem 待设置温度值
public void setTem(String tem) {
this.tem =
* 获取湿度；
* @return 湿度值
public String getHum() {
* 设置湿度；
* @param hum 待设置湿度值
public void setHum(String hum) {
this.hum =
* 获取压强；
* @return 压强值
public String getPa() {
* 设置压强；
* @param pa 待设置压强值
public void setPa(String pa) {
* 获取雨量；
* @return 雨量值
public String getRain() {
* 设置雨量；
* @param rain 待设置雨量值
public void setRain(String rain) {
this.rain =
* 获取风向；
* @return 风向值
public String getWin_dir() {
return win_
* 设置风向；
* @param win_dir 待设置风向值
public void setWin_dir(String win_dir) {
this.win_dir = win_
* 获取风速；
* @return 风速值
public String getWin_sp() {
return win_
* 设置风向；
* @param win_sp 待设置风向值
public void setWin_sp(String win_sp) {
this.win_sp = win_
* 获取观测日期；
* @return 观测日期
public Timestamp getDate() {
* 设置观测日期；
* @param date 观测日期值
public void setDate(Timestamp date) {
this.date =
DBUitl类（数据库工具类）代码如下：
package EchartsE
import java.sql.*;
import org.apache.tomcat.jdbc.pool.DataS
import org.apache.tomcat.jdbc.pool.PoolP
* 数据库工具类（采用了tomcat jdbc pool）
* @author zhong
public class DBUtil {
private static DataS
//配置tomcat jdbc pool (连接池)
PoolProperties p = new PoolProperties();
p.setUrl("jdbc:sqlserver://localhost:1433; DatabaseName=weather");
//设置连接的url
p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
//载入数据库驱动
p.setUsername("sa");
//用于远程连接的用户名
p.setPassword("2003NianDeDiYiChangXue");
p.setJmxEnabled(true);
p.setTestWhileIdle(false);
p.setTestOnBorrow(true);
p.setValidationQuery("SELECT 1");
p.setTestOnReturn(false);
p.setValidationInterval(30000);
p.setTimeBetweenEvictionRunsMillis(30000);
p.setMaxActive(100);
p.setInitialSize(10);
p.setMaxWait(10000);
p.setRemoveAbandonedTimeout(60);
p.setMinEvictableIdleTimeMillis(30000);
p.setMinIdle(10);
p.setLogAbandoned(true);
p.setRemoveAbandoned(true);
p.setJdbcInterceptors(
"org.apache.tomcat.jdbc.pool.interceptor.ConnectionS"+
"org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer");
ds = new DataSource();
ds.setPoolProperties(p);
private DBUtil() {}
* 获取一个数据库连接（Connection）；
* @return Database Connection
public static Connection getConnection() {
Connection conn =
conn = ds.getConnection();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的Connection；
* @param conn 待关闭的Connection
public static void close(Connection conn) {
if (conn != null) {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的Statement；
* @param stmt
待关闭的Statement
public static void close(Statement stmt) {
if (stmt != null) {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
* 关闭传入的ResultSet；
* @param rs
待关闭的ResultSet
public static void close(ResultSet rs) {
if (rs != null) {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数组
echarts 动态生成图表、echarts 动态图表、echarts实时动态曲线、echarts动态添加曲线、echarts 动态曲线，以便于您获取更多的相关知识。
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
的信息，还有echarts 动态生成图表、echarts 动态图表、echarts实时动态曲线、echarts动态添加曲线、echarts 动态曲线等
，所有相关内容均不代表云栖社区的意见！当前位置： &
41,287 次阅读 -
作者：王海庆
ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的应用。
系列文章：
（Enterprise Charts，商业级数据图表）是百度的一个开源的数据可视化工具，底层基于(一个全新的轻量级canvas类库)，可以比较方便的折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现等。ECharts的开发团队有个Slider介绍为什么使用Echarts，感兴趣的童鞋可以移步欣赏（）。
本案例为具有时间轴的折线系列图，适合用于对比展示数据，比如某超市年度销量变化图，某产品的前期投入资金图等。
大家也可以在线预览、编辑效果，请移步到codepen。
————————————————————————————————————————————
== 带时间轴折线图========
————————————————————————————————————————————
1.标签式单文件引入Echarts。
官方推荐三种使用引入ECharts的方式，模块化包引入、模块化单文件引入和标签式单文件引入。首篇博客采用了模块化单文件引入的方式，这种方式可以按需加载文件，是官方推荐的方式。本文我们将使用标签式单文件引入的方式，如果你的项目没有基于模块化开发，同时也不基于AMD规范，那么使用标签式单文件方式将会非常方便，我们只需要使用script标签引入一个ECharts库即可，可引入的单文件包括：dist/echarts-all.js和source/echarts-all.js。前者经过压缩，包括全图表，包含world，china以及34个省市级地图数据；后者未压缩，包括全图表，包含world，china以及34个省市级地图数据，可用于调试。
//from echarts example
id=“main” style=“height:400”
src=“example/www2/js/dist/echarts-all.js”
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
myChart.setOption(option);
2.时间轴控件的使用。
使用时间轴控件，我们需要从两个方面做准备，一个是设置时间轴，一个是设置每个时间点（数据和标题等）。
设置时间轴。时间轴在ECharts里使用timeline设置，每个图标最多只能拥有一个时间轴，主要参数如下。
时间轴列表，同时也是轴label内容
显示策略，可选为：true（显示） | false（隐藏）
‘time’
模式是时间类型，时间轴间隔根据时间跨度计算，可选为：’number’
时间轴上多个option切换时是否进行merge操作，同setOption第二个参数（详见实例方法）
拖拽或点击改变时间轴是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false
是否自动播放
是否循环播放
playInterval
播放时间间隔
currentIndex
当前索引位置，对应options数组，用于指定显示特定系列
number|string
时间轴宽度，默认为总宽度 – x – x2，指定width后将忽略x2。
number|string
时间轴高度
number|string
时间轴左上角横坐标
number|string
时间轴左上角纵坐标，默认无，随y2定位，
number|string
时间轴右下角横坐标
number|string
时间轴右下角纵坐标
number|Array
内边距，单位px,接受数组分别设定上右下左边距，同css。
backgroundColor
‘rgba(0,0,0,0)’
背景颜色，默认透明。
borderWidth
borderColor
‘#ccc’
controlPosition
‘left’
播放控制器位置，可选为：’left’ | ‘right’ | ‘none’
时间轴轴线样式，lineStyle控制线条样式，（详见）
时间轴标签文本
checkpointStyle
时间轴当前点
controlStyle
时间轴控制器样式，可指定正常和高亮颜色
’emptyDiamond’
轴点symbol，同serie.symbol
symbolSize
轴点symbol，同serie.symbolSize
a++. width、height、x、x2、y、y2等设置大小位置的参数，类型为number|string，可以接受数值型，单位为px，也可接受百分比（字符串），如50%表示居中显示。
b++. lineStyle的默认值为{color: &#’, width: 1, type: ‘dashed’}
c++. label的默认值为代码所示。参数解释如下
show : 是否显示 ；
interval : 挑选间隔，默认为’auto’，可选为：’auto’（自动隐藏显示不下的） | 0（全部显示） | {number} ；
rotate : 旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90 ；
formatter ： 间隔名称格式器：{string}（Template） | {Function} ；
textStyle : 文字样式（详见textStyle）
show: true,
interval: ‘auto’,
rotate: 0,
formatter: null,
textStyle: {
color: &#’
d++. checkpointStyle的参数解释如下，默认值为代码所示。
symbol : 当前点symbol，默认随轴上的symbol
symbolSize : 当前点symbol大小，默认随轴上symbol大小
color : 当前点symbol颜色，默认为随当前点颜色，可指定具体颜色，如无则为&#ff’
borderColor ： 当前点symbol边线颜色
borderWidth ： 当前点symbol边线宽度
symbol : ‘auto’,
symbolSize : ‘auto’,
color : ‘auto’,
borderColor : ‘auto’,
borderWidth : ‘auto’,
show: false,
textStyle: {
color: ‘auto’
e++. controlStyle的默认值为
normal : { color : &#’},
emphasis : { color : &#ff’}
样式参数在时间轴上的作用效果见下图详视。
设置每个时间点。第二步是设置每个具体的时间点，每个时间点就是一个图标，包括标题、图例、坐标轴、数据等，当然一般坐标轴、图例等不变，仅仅改变标题和数据。
var option = {
timeline : {},
options : [
然后我们来解读实现过程。
时间轴里面我们设置了时间戳，仅仅显示年份；为保证美观，调整了时间轴的位置；同时设定了时间轴播放设置。
var option = {
timeline : {
&#-01’,&#-01’,&#-01’,&#-01’,&#-01’
formatter : function(s) {
return s.slice(0, 4);
height:80,
padding:[40,10,10,10],
autoPlay : true,
playInterval : 2000
options : [
然后设置时间点，先看2012年的数据设置，我们设置标题、提示、图例、坐标轴、绘制数据线。
var option = {
timeline : {
&#-01’,&#-01’,&#-01’,&#-01’,&#-01’
formatter : function(s) {
return s.slice(0, 4);
height:80,
padding:[40,10,10,10],
autoPlay : true,
playInterval : 2000
options : [
text:&#年货物销量图’,
subtext:‘纯属捏造，如有雷同，人品爆发。’
tooltip: {
show: true
data:[‘销量’]
type : ‘category’,
data : [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”,“帽子”,“围巾”],
axisLabel:{
margin:-20,
textStyle:{
color:&#’,
fontWeight:‘bold’
type : ‘value’
series : [
type:‘line’,
data:[5, 20, 38, 10, 24, 20,24,32],
markLine : {
{type : ‘average’, name: ‘平均值’}
markPoint : {
{type : ‘max’, name: ‘最大值’},
{type : ‘min’, name: ‘最小值’}
其他时间点只需要设置于2002年不同的地方即可，本例我们仅仅设置标题和数据表。
var option = {
timeline : {
&#-01’,&#-01’,&#-01’,&#-01’,&#-01’
formatter : function(s) {
return s.slice(0, 4);
height:80,
padding:[40,10,10,10],
autoPlay : true,
playInterval : 2000
options : [
text:&#年货物销量图’,
subtext:‘纯属捏造，如有雷同，人品爆发。’
tooltip: {
show: true
data:[‘销量’]
type : ‘category’,
data : [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”,“帽子”,“围巾”],
axisLabel:{
margin:-20,
textStyle:{
color:&#’,
fontWeight:‘bold’
type : ‘value’
series : [
type:‘line’,
data:[5, 20, 38, 10, 24, 20,24,32],
markLine : {
{type : ‘average’, name: ‘平均值’}
markPoint : {
{type : ‘max’, name: ‘最大值’},
{type : ‘min’, name: ‘最小值’}
text:&#年货物销量图’,
subtext:‘纯属捏造，如有雷同，人品爆发。’
series : [
type:‘line’,
data:[10, 20, 36, 18, 26, 16,20,34],
markLine : {
{type : ‘average’, name: ‘平均值’}
markPoint : {
{type : ‘max’, name: ‘最大值’},
{type : ‘min’, name: ‘最小值’}
剩下的就不多说了，大家自行补足。
感谢您的阅读，欢迎提出您的宝贵意见。
文章出处：
注：转载文章均来自于公开网络，仅供学习使用，不会用于任何商业用途，如果侵犯到原作者的权益，请您与我们联系删除或者授权事宜，联系邮箱：contact@dataunion.org。转载数盟网站文章请注明原文章作者，否则产生的任何版权纠纷与数盟无关。
相关文章！
不用想啦，马上 发表自已的想法.
做最棒的数据科学社区
扫描二维码,加微信公众号
联系我们：