echarts 折线常用

<style>
.monitor-statis{
    width: 100%;
}
.monitor-statis tr{
    width: 100%;height: 242px;
}
.monitor-statis tr td{
    box-sizing: border-box;
    padding: 10px 10px;
    width: 33%;height: 100%;

    overflow: visible;
}
.monitor-statis tr td>div{
    height: 242px; width: 100%;
    border: 1px solid #EEEEEE;
}
</style>
<div class="m_s_box">
    <div class="index_main">
        <table class="monitor-statis" >
            <tr >
                <td>
                    <div id="deviceNum_chart" ></div>
                </td>
                <td>
                    <div id="terminalNum_chart" > </div>
                </td>
                <td>
                    <div id="serverCPU_chart" ></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="Memory_chart"> </div>
                </td>
                <td>
                    <div id="Network_chart"></div>
                </td>
                <td>
                    <div id="disk_chart"> </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div id="IOPS_chart" ></div>
                </td>
            </tr>
        </table>
    </div>
</div>

<script src="{#smarty_js#}/echarts.module.js?version={yii::$app->version}"></script>
<script>
    $(function(){
        var _desc = ["占用率", "噪声", "空闲"];
        var _xDataTime = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"];
        var _ydata = [
            [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
            [10,11, 12, 13, 14, 15, 16, 17, 18, 19, 110, 111],
            [20,21, 12, 13, 14, 15, 16, 17, 18, 19, 210, 211]
        ];
        var _color = [["#93AAD6"],['#FBCCC6'],['#C1C1C1']];
        drawChart("deviceNum_chart","设备数量",_desc,_xDataTime,_ydata,_color);
        drawChart("terminalNum_chart","终端数量",_desc,_xDataTime,_ydata,_color);
        drawChart("serverCPU_chart","服务器CPU",_desc,_xDataTime,_ydata,_color);
        drawChart("Memory_chart","内存",_desc,_xDataTime,_ydata,_color);
        drawChart("Network_chart","网络",_desc,_xDataTime,_ydata,_color);
        drawChart("disk_chart","磁盘",_desc,_xDataTime,_ydata,_color);
        drawChart("IOPS_chart","IOPS",_desc,_xDataTime,_ydata,_color);
    });
    function drawChart(id,_title,desc,xdatae,ydata,color){
        var descArr = [],seriesArr = [];
        for(var s=0;s<desc.length;s++){
            descArr.push({
                name: desc[s],
                icon: "circle"
            });
            seriesArr.push({
                name: desc[s] ,
                type: 'line',
                color:  color[s],// 颜色
                silent: true, // 取消点击事件
//              areaStyle:{ // 填充颜色
//                  normal:{
//                      color:color[s],
//                      opacity:0.2
//                  }
//              },
                smooth:true,
                itemStyle:{ // 转折点 控制
                    normal:{
                        borderColor:'#277cdc'
                    }
                },
                data: ydata[s]
            })
        }
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: _title + "统计图",
                left: 'center',
                top: '7'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '12%',
                right: '5%',
                itemWidth: 10,
                data: descArr
            },
            grid: {
                left: '5%',
                right: '6%',
                bottom: '7%',
                top: '21%',
                containLabel: true
            },
            xAxis: {
                type : 'category',
                boundaryGap : false,
                axisLine:{ // x 线样式修改
                    lineStyle:{
                        color:'#8cccca'
                    }
                },
                axisLabel: { // x 名称样式修改
                    textStyle: {
                        color: '#666666'
                    }
                },
                splitLine:{ // x轴的网格
                    show: true,
                    lineStyle:{
                        color:'#f2f2f2'
                    }
                },
                data:xdatae
            },
            yAxis: {
                type : 'value',
                axisLine:{ // y 线样式修改
                    lineStyle:{
                        color:'#8cccca'
                    }
                },
                axisLabel: { // y 名称样式修改
                    textStyle: {
                        color: '#666666'
                    },
//                    formatter:function(value){
//                        return value;
//                    }
                },
                splitLine:{ // y轴的网格
                    show: true,
                    lineStyle:{
                        color:'#f2f2f2'
                    }
                }
            },
            series: seriesArr
        };
        myChart.setOption(option,true); // 不合并配置项
        window.addEventListener("resize", function () {//每个图 自适应
            myChart.resize();
        });
    }
</script>