我使用ECharts绘制一个简单的折线图,显示一段时间内CPU使用率的数据。我希望xAxis只有6个间隔,每小时一次;每个间隔之间有每半小时的值。我还希望axisPointer是垂直的,而不是水平的。
问题是,要做到这一点,我需要将 xAxis 类型设置为时间,这样做会使axisPointer发生变化水平,而不是垂直。在下图中,您可以看到axisPointer在垂直方向上的显示方式与类别类型。
最后,这是用于制作图表的代码。
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
grid: {
x: 40,
x2: 40,
y: 35,
y2: 25
},
// Add tooltip
tooltip: {
trigger: 'axis',
},
color: ['#EF5350', '#66BB6A'],
calculable: false,
// Horizontal axis
xAxis: [{
type: 'time',
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}%'
}
}],
series: [
{
name: 'CPU',
type: 'line',
showAllSymbol: true,
tooltip: {
trigger: 'axis',
padding: 15,
formatter: function(params, ticket, callback){
var res = '<span style="font-weight: 600;">Today, ' + params[1].getHours() + ':' + params[1].getMinutes() + '</span><br/><hr>CPU: <span style="float: right;">' + params[2][1] + '%</span>';
return res;
}
},
data: (function(){
var d = [];
var tme = 10;
var now = new Date();
var value;
while(tme++ < 16){
d.push([
new Date(2017, 3, 15, tme, 0), Math.floor(Math.random() * 85) + 25
]);
if(tme !==16){
for(i = 5; i < 60; i+=5){
d.push([
new Date(2017, 3, 15, tme, i), Math.floor(Math.random() * 70) + 30
]);
}
}
}
return d;
})()
}
]
};
myChart.setOption(option);
#myChart {
height: 400px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.0/echarts-all.js"></script>
<div id="myChart">
</div>