组件

一：标题组件

1.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>title</title>
 6     <script src="../echarts.min.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style=" 900px;height:600px;"></div>
10     <script type="text/javascript">
11         var mychart=echarts.init(document.getElementById('main'));
12         var option={
13             title:{
14                 show:true,
15                 text:'折线图',
16                 subtext:'test title style',
17                 left:'550',
18                 borderColor:'#cc0',
19                 borderWidth:'3',
20                 textStyle:{
21                     fontSize:30,
22                     color:'#aff',
23                     align:'center'
24                 }
25             },
26             toolbox:{
27                 show:true,
28                 feature:{
29                     saveAsImage:{
30                         show:true
31                     }
32                 }
33             },
34             legend:{
35                 data:['销量']
36             },
37             xAxis:{
38                 data:['衬衫','羊毛衫','雪纺衫','裤子','外套','帽子']
39             },
40             yAxis:{},
41             series:{
42                     name:'销量',
43                     type:'line',
44                     data:[5,30,6,9,2,15]
45                 }        
46         }
47         mychart.setOption(option);
48     </script>
49 </body>
50 </html>

2.效果

二：工具栏

1.介绍

2.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>toobox</title>
 6     <script src="../echarts.min.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style=" 900px;height:600px;"></div>
10     <script type="text/javascript">
11         var mychart=echarts.init(document.getElementById('main'));
12         var option={
13             title:{
14                 text:'折线图与直方图'
15             },
16             toolbox:{
17                 show:true,
18                 feature:{
19                     dataView:{
20                         show:true
21                     },
22                     restore:{
23                         show:true
24                     },
25                     dataZoom:{
26                         show:true
27                     },
28                     saveAsImage:{
29                         show:true
30                     },
31                     magicType:{
32                         type:['line','bar']
33                     }
34                 }
35             },
36             legend:{
37                 data:['销量','产量']
38             },
39             xAxis:{
40                 data:['衬衫','羊毛衫','雪纺衫','裤子','外套','帽子']
41             },
42             yAxis:{},
43             series:[{
44                     name:'销量',
45                     type:'line',
46                     data:[5,30,6,9,2,15]
47                 },{
48                     name:'产量',
49                     type:'bar',
50                     data:[6,20,8,13,5,19]
51                 }
52             ]
53         }
54         mychart.setOption(option);
55     </script>
56 </body>
57 </html>

3.效果

　　切换为折线图：

三：弹窗

1.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>tooltip</title>
 6     <script src="../echarts.min.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style=" 900px;height:600px;"></div>
10     <script type="text/javascript">
11         var mychart=echarts.init(document.getElementById('main'));
12         var option={
13             title:{
14                 text:'折线图与直方图'
15             },
16             toolbox:{
17                 show:true,
18                 feature:{
19                     saveAsImage:{
20                         show:true
21                     }
22                 }
23             },
24             tooltip:{
25                 trigger:'axis'
26             },
27             legend:{
28                 data:['销量','产量']
29             },
30             xAxis:{
31                 data:['衬衫','羊毛衫','雪纺衫','裤子','外套','帽子']
32             },
33             yAxis:{},
34             series:[{
35                     name:'销量',
36                     type:'line',
37                     data:[5,30,6,9,2,15]
38                 },{
39                     name:'产量',
40                     type:'bar',
41                     data:[6,20,8,13,5,19]
42                 }
43             ]
44         }
45         mychart.setOption(option);
46     </script>
47 </body>
48 </html>

2.效果

四：标记线与标记点

1.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>mark</title>
 6     <script src="../echarts.min.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style=" 900px;height:600px;"></div>
10     <script type="text/javascript">
11         var mychart=echarts.init(document.getElementById('main'));
12         var option={
13             title:{
14                 text:'折线图与直方图'
15             },
16             toolbox:{
17                 show:true,
18                 feature:{
19                     saveAsImage:{
20                         show:true
21                     }
22                 }
23             },
24             legend:{
25                 data:['销量','产量']
26             },
27             xAxis:{
28                 data:['衬衫','羊毛衫','雪纺衫','裤子','外套','帽子']
29             },
30             yAxis:{},
31             series:{
32                     name:'销量',
33                     type:'line',
34                     data:[3,30,6,9,5,15],
35                     markPoint:{
36                         data:[
37                             {type:'max',name:'最大值'},
38                             {type:'min',name:'最小值',symbol:'arrow',symbolSize:[20,30]}
39                         ]
40                     },
41                     markLine:{
42                         data:[
43                             {type:'average',name:'平均值'}
44                         ]
45                     }
46                 }
47         }
48         mychart.setOption(option);
49     </script>
50 </body>
51 </html>

2.效果