1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Echarts圖表</title> 6 <script src="../js/echarts.min.js"></script> 7 </head> 8 <body> 9 <div id="main" style="width:600px;height:400px;"></div> 10 </body> 11 </html> 12 <script> 13 var myChart=echarts.init(document.getElementById('main')) 14 var option={ 15 legend:{ 16 padding:10, 17 itemGap:10,//圖例間隔 18 data:['鄧艷波','楊國娥']//legend的data值要和series的對象的每個name 值相對應，不然不出來lenend 19 }, 20 tooltip:{//懸浮的時候提示框 21 trigger:'item'//觸發方式 22 }, 23 xAxis:{ 24 type:'category',//什么類型的，比如數值？ 25 data:['周一','周二','周三','周四','周五','周六','周日'] 26 }, 27 yAxis:{ 28 type:'value', 29 boundaryGap:[0.1,0.1],//類目起始和結束兩端空白策略，見下圖，默認為true留空，false則頂頭 30 splitNumber:4,//數值的分割段數，不指定的時候根據最大值最小值進行划分 31 32 }, 33 series:[ 34 { 35 name:'鄧艷波',//系列名如啟用legend，該值將被legend.data索引相關 36 type:'line',//折線圖 37 data:[112,23,45,56,233,343,454,89,343,123,45,76] 38 }, 39 { 40 name:'楊國娥',//系列名 41 type:'line',//折線圖 42 data:[54,543,23,322,33,63,111,222,23] 43 } 44 ] 45 46 } 47 myChart.setOption(option) 48 </script>