ECharts - 将axisPointer定位设置为垂直(时间类型)

时间:2017-03-17 18:53:42

标签: javascript charts data-visualization echarts

我使用ECharts绘制一个简单的折线图,显示一段时间内CPU使用率的数据。我希望xAxis只有6个间隔,每小时一次;每个间隔之间有每半小时的值。我还希望axisPointer是垂直的,而不是水平的。

问题是,要做到这一点,我需要将 xAxis 类型设置为时间,这样做会使axisPointer发生变化水平,而不是垂直。在下图中,您可以看到axisPointer在垂直方向上的显示方式与类别类型。

vertical axisPointer

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

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

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>

0 个答案:

没有答案