Echarts：X轴不等距折线图
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts：X轴不等距折线图相关的知识，希望对你有一定的参考价值。
来源：https://blog.csdn.net/flygoa/article/details/73090369
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不等距折线图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
</body>
</html>
<script type="text/javascript">
function addZero(number)
return (number.toString())[1] ? number :‘0‘ + number;
var myChart = echarts.init(document.getElementById(‘main‘));
var index=1;
var option =
legend:
data: [‘随机数值‘]
,
xAxis: [
axisLabel:
formatter: function (params)
var date = new Date(params);
var time=addZero(date.getHours()) + ":00";
if(time==="00:00"&& index===2)
time="24:00"
if(time==="00:00"&& index===1)
index=2
return time
,
type: ‘time‘,
data:[new Date(2017, 9, 1, 0, 0, 0),new Date(2017, 9, 2, 0, 0, 0)],
min: new Date(2017, 9, 1, 0, 0, 0),
max: new Date(2017, 9, 2, 0, 0, 0),
splitNumber: 16/*X轴上包含原点在内的值的个数，当该值不能使“显示范围”在X轴“整数等分”时，该值不起作用*/
],
yAxis: [
type: ‘value‘,
min: 0,
max: 11
],
series: [
name: ‘随机数值‘,
type: ‘line‘,
data: (function ()
var timeAndData = [];
for (var i = 0; i <24; i++)
var timeDate = new Date(2017, 9, 1, i, (Math.random() * 60).toFixed(0), 0);
var randomNum = (Math.random() * 10).toFixed(2);
timeAndData.push([timeDate, randomNum]);
return timeAndData;
)()
]
;
myChart.setOption(option);
</script>
```
以下真实案例：
```javascript
function addZero(number)
return (number.toString())[1] ? number : ‘0‘ + number;
var lineOption =
animation: false,
title:
text: ‘总流量（Bps）‘
,
tooltip:
trigger: ‘axis‘,
axisPointer:
type: ‘cross‘
,
grid:
left: 50,
right: 15
,
legend:
data: [‘当前流量‘]
,
xAxis: [
axisLabel:
formatter: function (params)
var date = new Date(params);
return addZero(date.getHours()) + ":" + addZero(date.getMinutes());
,
type: ‘time‘,
data: null,
splitNumber: 30
],
yAxis: [
type: ‘value‘
],
series: [
name: ‘当前流量‘,
type: ‘line‘,
data: null
]
;
console.log(result.lineinfo);
/*上面result是返回结果，result.lineinfo是要渲染的数据*/
/*以下计算X轴刻度*/
$scope.xMinValue = new Date(result.lineinfo[0][0]);
$scope.xMaxValue = new Date((result.lineinfo[result.lineinfo.length - 1])[0]);
$scope.xAxisData=[$scope.xMinValue,$scope.xMaxValue];
/*以上计算X轴刻度*/
/*以下计算各点的纵横坐标*/
$scope.yAxisData=[];
angular.forEach(result.lineinfo, function (singleArray)
$scope.yAxisData.push([(new Date(singleArray[0])), singleArray[1]])
);
/*以上计算各点的纵横坐标*/
lineOption.xAxis[0].data = $scope.xAxisData;
lineOption.series[0].data = $scope.yAxisData;
instanceEcharts.setOption(lineOption);
```
以上是关于Echarts：X轴不等距折线图的主要内容，如果未能解决你的问题，请参考以下文章