可切换折线图

<span style="margin-left: 20px;font-size: 20px;">容量概况</span>
            <div style="width: 100%;height: 90%;">
                <div id="pueNavLeft" style="width:100%;height: 30px;text-align:right;margin-bottom: 10px">
                    <div class="layui-input-inline" style="padding-right: 100px;padding-top: 10px">
                        <a class="a_display a_active" value="1"
                           style="border-bottom-left-radius: 8px; border-top-left-radius: 8px;"
                           onclick="listPueBy(this,'1')">月</a>
                        <a class="a_display" value="2" style="border-bottom-right-radius: 8px; border-top-right-radius: 8px;"
                           onclick="listPueBy(this,'2')">年</a>
                    </div>
                </div>
                <div id="pueCharts"
                     style="height: 350px;width: 100%;text-align: center;margin: auto;font-size: 50px;color: red"></div>
            </div>

 //点一huo
    genePueEchartsView(1)

    function listPueBy(dom, type) {
        $(dom).siblings().removeClass("a_active");
        $(dom).addClass("a_active");
        genePueEchartsView(type);
    }

    function genePueEchartsView(type) {
        var pueChart = echarts.init(document.getElementById('pueCharts'));
        $.ajax({
            url: "${pageContext.request.contextPath}/index/pue?type=" + type,
            type: "post",
            success: function (res) {
                var data = res.data;
                var xAxisData = [];
                var pueData = [];
                for (var i = 0; i < data.length; i++) {
                    xAxisData.push(data[i].dateStr);
                    pueData.push(data[i].pue);
                }
                var option = {
                    legend: {
                        data: ['容量概况'],
                        right: 20,
                        top: '50%'
                    },
                    grid: {
                        left: '2%',
                        right: '10%',
                        bottom: '10px',
                        top:"20px",
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: xAxisData,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white',  //更改坐标轴文字颜色
                            }
                        }
                    },
                    yAxis: {axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white',  //更改坐标轴文字颜色
                            }
                        }},
                    series: [{
                        name: 'PUE',
                        data: pueData,
                        type: 'line',
                        color: '#6495ED',
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        }

                    }]
                };
                pueChart.setOption(option);
            }
        });

    }

注意：本文归作者所有，未经作者允许，不得转载