Echart的基础开发模板 

 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>

 

posted @ 2018-08-02 14:24  前端极客  阅读(1473)  评论(0)  编辑  收藏  举报