javascript - 我想使用 ECharts 创建一个类似时间线的条形图
问题描述
我想将 xAxis 的标签更改为以 1 小时为间隔的小时。如何格式化 xAxis 数据?我不能为 xAxis 使用时间类型,因为它通常用于连续数据。
option = {
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (params) {
var tar;
if (params[1].value != '-') {
tar = params[1];
}
else {
tar = params[0];
}
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + ' min';
}
},
legend: {
data: ['Duration (minutes)']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
formatter: '{value} kg'
},
yAxis: {
type: 'category',
data: ['2019-02-01','2019-02-02','2019-02-03','2019-02-04','2019-02-05','2019-02-06','2019-02-07']
},
series: [
{
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Duration (minutes)',
type: 'bar',
stack: '总量',
itemStyle: {
color: '#88c149'
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
解决方案
推荐阅读
- apache-spark - Spark double 类型加减法错误
- ansible - ansible 条件语句不应包含 jinja2 模板分隔符
- c# - 共享一个随机脚本的两个对象在它们应该产生不同的顺序时产生相同的顺序
- php - 如何根据列数据从数据库中选择数据
- python - 如何对 FacetGrid 图例进行排序?
- javascript - 设置 D3.js 圆形报告边界
- java - Wildfly 20 上的 SQLite3 数据源 - 连接到数据库时出错
- node.js - 错误 TS1259:模块 '"./node_modules/@types/express/index"' 只能使用 'esModuleInterop' 标志默认导入
- javascript - 从 JQuery 传递到 React JS
- swift - 如何在 Swift 中动态更改视图(例如设置页面)?