echarts 折线常用
来源：互联网 发布：汕头网络 编辑：程序博客网 时间：2024/06/05 06:31
<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>阅读全文
