var option = {
//timeline基本配置都写在baseoption 中
baseOption: {
timeline: {
//loop: false,
axisType: 'category',
show: true,
autoPlay: true,
playInterval: 1000,
data: ['Account Management', 'Application', 'Client H/W', 'Client S/W', 'HPI打印机']
},
grid: {
containLabel: true
},
xAxis: [{
type: 'category',
data: ['第一周', '第二周', '第三周', '第四周', '第五周']
}],
yAxis: [{
type: 'value',
name: '数量',
axisLabel: {
formatter: '{value}'
}
}],
series: [{
type: 'line',
}, ],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
},
//变量则写在options中
options: [
//Account Management
{
series: [{
name: '故障',
type: 'bar',
data: [20, 12, 31, 34, 31]
}, {
name: '请求',
type: 'bar',
data: [10, 20, 5, 9, 3]
}]
},
//Application
{
series: [{
name: '故障',
type: 'bar',
data: [20, 22, 34, 14, 21]
}, {
name: '请求',
type: 'bar',
data: [10, 20, 5, 9, 3]
}]
},
//Client H/W
{ series: [{
name: '故障',
type: 'bar',
data: [19, 2, 3, 14, 51]
}, {
name: '请求',
type: 'bar',
data: [10, 20, 5, 9, 3]
}]
},
//Client S/W
{ series: [{
name: '故障',
type: 'bar',
data: [9, 27, 35, 4, 1]
}, {
name: '请求',
type: 'bar',
data: [10, 20, 5, 9, 3]
}]
},
//HPI打印机
{ series: [{
name: '故障',
type: 'bar',
data: [19, 21, 33, 8, 42]
}, {
name: '请求',
type: 'bar',
data: [10, 20, 5, 9, 3]
}]
}, ]
}
var mychart = echarts.init(document.getElementById('container'));
mychart.setOption(option);

  

echarts + timeline 显示多个options的更多相关文章

  1. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  2. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  3. echarts如何显示在页面上

    echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...

  4. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  5. Echarts饼图显示模板

    图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示.可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | ...

  6. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  7. echarts可视显示已租未租

    1:菜鸟引入js <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/ ...

  8. ECharts中文显示为Unicode码

    后台遍历出的数据,在ECharts的js中引用为Unicode码 解决方案: <s:property>标签的escape属性默认值为true,即不解析html代码,直接将其输出. 若想要输 ...

  9. Echarts纵坐标显示为整数小数

    chart.DoubleDeckBarChart = function (getIDParam, Legend, xAxisData, seriesName1, seriesName2, series ...

随机推荐

  1. Javascript - ExtJs - 整合百度文章编辑器

    ExtJs - 整合百度文章编辑器(ExtJs UEditor) 第一步:去官网下载最新版本的UEditor,UEditor下载. 第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以 ...

  2. ht学习流程

    http://www.hightopo.com/blog/461.html数百个 HTML5 例子学习 HT 图形组件 掌握 HT 基础: 1.先入门手册 http://www.hightopo.co ...

  3. 类ThreadLocal的使用与源码分析

    变量值的共享可以使用public static的形式,所有的线程都使用同一个变量.如果每个线程都有自己的共享变量,就可以使用ThreadLocal.比如Hibernat的session问题就是存在Th ...

  4. nginx 端口映射多个应用

    nginx端口映射多个应用,应用中的静态资源路径尽量是写相对路径 server { listen 8000; location / { proxy_pass http://10.1.166.216:9 ...

  5. 阿里云ECS CentOS 7 安装图形化桌面

    CentOS 7 系统下,本文以 MATE 桌面环境安装进行安装配置说明: 1 . 安装 X Window System. yum groups install "X Window Syst ...

  6. 竞赛常用STL备忘录

    __builtin: __builtin_popcount:二进制中 1 的个数__builtin_ctz:末尾的 0,即对 lowbit 取log__builtin_clz:开头的 0,用 31 减 ...

  7. socket 通信 error:88

    调用函数(setsockopt)来设置 recv buffer 和send  buffer时报错: setsockopt error: Socket operation on non-socket(e ...

  8. maven项目板块的pom.xml配置

    项目名为helloweb 项目文件结构图1 helloweb>pom.xml内容如下: <project xmlns="http://maven.apache.org/POM/4 ...

  9. Linux VPS基础命令 - cp复制文件命令

    cp命令在Linux VPS操作和应用过程中还是比较常用的,我们可以用来复制文件或者文件夹,重命名一个新的文件以及复制到其他路径中用于文件的转移. 举例用法: 1.复制root目录下的itbulu.c ...

  10. python pip下载速度慢的解决方法

    pip是python内置的非常好用的下载工具,基本可以下载全部的python库.它还有一个非常好的特点,当你安装一个库的时候,它会自动帮你安装所有这个库的依赖库.完全一键式操作.非常方便.但是由于pi ...