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 ...
随机推荐
- python - 获取win系统参数,发送/保存配置
import wmi import json c = wmi.WMI () msg = {} # 系统信息:系统版本,主机名,系统安装时间,系统位数,串口ID,总内存大小 system = ['Cap ...
- 基于ip的虚拟主机配置——在一台服务器上绑定多个 IP 地址
进入/etc/sysconfig/network-scripts,修改ifcfg-ens33文件 输入 ip addr 查看ip 引用:https://blog.csdn.net/u013887008 ...
- Linux下安装PCRE
原文链接:https://www.linuxidc.com/Linux/2015-03/114986.htm PCRE(Perl Compatible Regular Expressions)是一个轻 ...
- java String、StringBuffer、StringBuild、StringTokenizer
StringBuffer线程安全.StringBuilder线程不安全 效率: StringBuilder(线程不安全) > StringBuffer(线程安全) > String Str ...
- 应用 XAF 开发移动手机应用
应用 XAF 开发移动手机应用: 1. How to create a native mobile or lightweight web client UI based on the existing ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
- python3+selenium框架设计09-生成测试报告
使用HTMLTestRunner可以生成测试报告.HTMLTestRunner是unittest模块下的一个拓展,原生的生成报告样式比较丑,GitHub上有大佬优化过后的版本:GitHub地址.下载之 ...
- 在Visual Studio里配置及查看IL
原文地址:http://www.myext.cn/other/a_25162.html 在之前的版本VS2010中,在Tools下有IL Disassembler(IL中间语言查看器),但是我想直接集 ...
- python old six day
今天主要内容: . is 和== 的区别 . 编程的问题 一. is和==的区别! is 比较的是内存地址 == 比较的是值 记住结果就好 ⑴id 通过id() 我们查看到一个变量表示 ...
- swift 实践- 05 -- UITextField
import UIKit class ViewController: UIViewController ,UITextFieldDelegate{ // 文本框的创建, 有如下几个样式: // UIT ...