可视化Echarts的使用示例

1.照着官方文档简单做两个图表，感受一下。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>echarts-demo1</title>
 6         <script src="echarts.js"></script>
 7     </head>
 8     <body>
 9         
10         <div id="bar" style=" 600px;height: 400px;"></div>
11         <div id="pie" style=" 600px;height: 400px;"></div>
12         <script>
13         //柱状图  bar
14            //基于准备好的实例，初始化echarts实例
15             var myChart = echarts.init(document.getElementById("bar"));
16             //指定图表的配置项和数据
17             var option = {
18                 title:{
19                     text:"echarts示例"
20                 },
21                 tooltip:{},
22                 legend:{
23                     data:['销量']
24                 },
25                 xAxis:{
26                     data:['衬衫','羊毛衫','雪纺衫']
27                 },
28                 yAxis:{},
29                 series:[{
30                     name:'销量',
31                     type:'bar',
32                     data:[5,20,36]
33                 }]
34             }
35             myChart.setOption(option);
36             
37         //饼图 pie
38         var mypie = echarts.init(document.getElementById("pie"));
39         mypie.setOption({
40             series:[{
41                 name:"访问来源",
42                 type:"pie",
43                 radius:'55%',
44                 data:[{value:400,name:"搜索引擎"},{value:300,name:"直接访问"},{value:400,name:"视频广告"},{value:400,name:"联盟广告"}]
45             }],
46             //南丁格尔图会用半径来表示数据大小
47             roseType:"angle"
48         })
49         
50         </script>
51     </body>
52 </html>