echarts + timeline 显示多个options
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的更多相关文章
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- echarts报表显示%+没有0
function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...
- echarts如何显示在页面上
echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- Echarts饼图显示模板
图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示.可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | ...
- 解决Bootstrap标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- echarts可视显示已租未租
1:菜鸟引入js <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/ ...
- ECharts中文显示为Unicode码
后台遍历出的数据,在ECharts的js中引用为Unicode码 解决方案: <s:property>标签的escape属性默认值为true,即不解析html代码,直接将其输出. 若想要输 ...
- Echarts纵坐标显示为整数小数
chart.DoubleDeckBarChart = function (getIDParam, Legend, xAxisData, seriesName1, seriesName2, series ...
随机推荐
- 2017-2018-2 20165234 实验四《Android程序设计》实验报告
一.实验报告封面 课程:Java程序设计 班级:1652 姓名:刘津甫 学号:20165234 指导教师:娄嘉鹏 实验日期:2018年5月14日 实验时间:13:45 - 3:25 ...
- 20165234 预备作业2 学习基础和C语言基础调查
学习基础和C语言基础调查 一.技能学习经验及体会 你有什么技能比大多人(超过90%以上)更好? 看到这个问题,我仔细想了想,好像的确没有什么特别出众的技能,但是我想到了许多我个人的爱好. 我从小喜欢五 ...
- Oracle 服务器运行健康状况监控利器 Spotlight on Oracle 的安装与使用
1.使用教程;https://blog.csdn.net/defonds/article/details/52936664 2.下载链接:https://pan.baidu.com/s/1cn7tE_ ...
- ASP.NET Core中使用Unity5
⒈添加相关依赖 Install-Package Unity Install-Package Unity.RegistrationByConvention ⒉扫描项目接口实现类 using System ...
- FAT文件系统规范v1.03学习笔记---3.根目录区之FAT目录项结构
1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...
- rtl8201以太网卡调试【转】
转自:https://blog.csdn.net/wenjin359/article/details/82893122 参考博客:https://blog.csdn.net/zpzyf/article ...
- 利用C#进行AUTOCAD的二次开发
众所周知,对AutoCAD进行二次开发用到的主要工具有:ObjectArx,VBA,VLisp.但它们的优缺点是显而易见的:ObjectArx功能强大,编程效率高,但它的缺点是编程者必须掌握VC++, ...
- 设计模式C++学习笔记之三(Singleton单例模式)
单例模式看起来也蛮简单的,就是在系统中只允许产生这个类的一个实例,既然这么简单,就直接贴代码了.更详细的内容及说明可以参考原作者博客:cbf4life.cnblogs.com. 3.1.解释 main ...
- 题解-AtCoder-agc003F Fraction of Fractal(非矩阵快速幂解法)
Problem AtCoder-agc003F 题意:给出\(n\)行\(m\)列的01矩阵,一开始所有 \(1\) 连通,称此为\(1\)级分形,定义\(i\)级分形为\(i-1\)级分形中每个标示 ...
- 【Linux】Swap与Memory
背景介绍 Memory指机器物理内存,读写速度低于CPU一个量级,但是高于磁盘不止一个量级.所以,程序和数据如果在内存的话,会有非常快的读写速度.但是,内存的造价是要高于磁盘的,且内存的断电丢失数据也 ...