4

我正在使用ECharts绘制一个简单的折线图，显示一段时间内有关 CPU 使用率的数据。我希望 xAxis 只有 6 个间隔，即每小时一次；在每个间隔之间，每半小时都有一个值。我还希望轴指针是垂直的，而不是水平的。

问题是，要做到这一点，我需要将xAxis 类型设置为时间，这样做会使轴指针变为水平，而不是垂直。在下图中，您可以看到轴指针在垂直方向与类别类型的外观。

垂直轴指针
（来源：zips.me）

在这里你可以看到我的图表是什么样的以及我想要解释的， 我的图表

最后，这是用于制作我的图表的代码。 

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>

4

0 回答 0