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="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>