來源：https://blog.csdn.net/flygoa/article/details/73090369
<!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>
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);
