10Echarts：X轴不等距折线图

来源：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);

10Echarts：X轴不等距折线图

猜你喜欢