Echarts统计图自适应

王小婷

发布于 2019-11-27 14:33:52

9520

发布于 2019-11-27 14:33:52

文章被收录于专栏：编程微刊

之前做折线图的时候，y轴数据都是写成固定了的，如果是统计步数的话，y轴坐标就要根据走了多少步来自适应了，如果没写的话，就会出现以下的这种情况，折线超出了整个坐标抽，就是一个bug了，只要修改一下属性即可，今天写一下Echarts统计图自适应。

主要属性

min:0, //就是这两个 最小值
max:'dataMax', //最大值

参考demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
        <script>
            // 折线图
            $.ajax({
                url: "data.json",
                data: {},
                type: 'GET',
                success: function(data) {
                    console.log(JSON.stringify(data))
                    hrFun(data.echatX, data.echatY);

                },
            });
            // 心率
            var hrChart = echarts.init(document.getElementById("main"));
            function hrFun(x_data, y_data) {
                hrChart.setOption({
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['步数值']
                    },
                    grid: {
                        left: '3%',
                        right: '20%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: x_data,
                    }],
                    yAxis: [{ // 纵轴标尺固定
                        type: 'value',
                        scale: true,
                        name: '步数值',
                        min:0, //就是这两个 最小值
                        max:'dataMax', //最大值
                        splitNumber: 20,
                        boundaryGap: [0.2, 0.2]
                    }],
                    series: [{
                        name: '步数',
                        type: 'line',
                        data: y_data
                    }]
                }, true);
            }
        </script>
    </body>
</html>

json数据

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        0,
        10000,3,43,5,47,8,39,0,1
    ],
    "echatY2": [
        0
    ]
}

就算一天走一万步或者更多，折线图都能根据最大数据来进行相对于的自适应啦。