我正在使用ECharts创建折线图。有谁知道是否有可能使其更紧凑?我的意思是减少画布内容周围的空白空间。
代码:
document.addEventListener('DOMContentLoaded', function() {
var chart = echarts.init(document.getElementById('firepower-sessions-history-line-chart'))
option = {
animation: false,
tooltip: { trigger: 'axis' },
xAxis: [
{
type: 'time',
interval: 3600000, // 1 hour (ms)
axisLabel: {
formatter: function(value) {
var date = new Date(value)
var hours = ('0' + date.getHours()).slice(-2)
var minutes = ('0' + date.getMinutes()).slice(-2)
var label = hours + ':' + minutes
if (hours === '00') {
var month = ('0' + (date.getUTCMonth() + 1)).slice(-2)
var day = ('0' + date.getUTCDate()).slice(-2)
label += '\n' + month + '-' + day
}
return label
}
}
}
],
yAxis: [{ type: 'value' }],
color: ['#3c99ea'],
series: [
{
name: 'Sessions',
type: 'line',
smooth: true,
itemStyle: { normal: { areaStyle: { type: 'default' } } },
symbol: 'none',
data: [
['2018-09-19 14:20:09', 3767],
['2018-09-19 14:10:08', 3964],
['2018-09-19 14:05:08', 3644],
['2018-09-19 14:00:09', 3745],
['2018-09-19 13:55:09', 3671],
['2018-09-19 13:50:08', 3890],
['2018-09-19 13:45:09', 3964],
['2018-09-19 13:40:09', 4211]
// and so on...
]
}
]
}
chart.setOption(option)
})
body {
margin: 40px;
}
h2 {
margin-bottom: 0;
}
#firepower-sessions-history-line-chart {
width: 1200px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>
<h2>Firepower Session History</h2>
<p>Last 24 hours</p>
<div id="firepower-sessions-history-line-chart"></div>
答案 0 :(得分:1)
ECharts具有grid选项,可以帮助您将图表放置在容器内。它具有可以设置的属性,例如上,左,右,下。对于此示例,我使用grid.left选项删除左侧的空间
document.addEventListener('DOMContentLoaded', function() {
var chart = echarts.init(document.getElementById('firepower-sessions-history-line-chart'))
option = {
grid: {
left: "40"
},
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'time',
interval: 3600000, // 1 hour (ms)
axisLabel: {
formatter: function(value) {
var date = new Date(value)
var hours = ('0' + date.getHours()).slice(-2)
var minutes = ('0' + date.getMinutes()).slice(-2)
var label = hours + ':' + minutes
if (hours === '00') {
var month = ('0' + (date.getUTCMonth() + 1)).slice(-2)
var day = ('0' + date.getUTCDate()).slice(-2)
label += '\n' + month + '-' + day
}
return label
}
}
}],
yAxis: [{
type: 'value'
}],
color: ['#3c99ea'],
series: [{
name: 'Sessions',
type: 'line',
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
symbol: 'none',
data: [
['2018-09-19 14:20:09', 3767],
['2018-09-19 14:10:08', 3964],
['2018-09-19 14:05:08', 3644],
['2018-09-19 14:00:09', 3745],
['2018-09-19 13:55:09', 3671],
['2018-09-19 13:50:08', 3890],
['2018-09-19 13:45:09', 3964],
['2018-09-19 13:40:09', 4211]
// and so on...
]
}]
}
chart.setOption(option)
})
body {
margin: 40px;
}
h2 {
margin-bottom: 0;
}
#firepower-sessions-history-line-chart {
width: 1200px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>
<h2>Firepower Session History</h2>
<p>Last 24 hours</p>
<div id="firepower-sessions-history-line-chart"></div>