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>