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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值