官网学习链接：http://echarts.baidu.com/tutorial.html#5%20分钟上手%20ECharts
案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图标案例</title> <script src="echarts/echarts.js"></script> </head> <body> <div id="main1" style=" 600px;height:400px;"></div> <div id="main2" style=" 600px;height:400px;"></div> <div id="main3" style=" 600px;height:400px;"></div> </body> <script type="text/javascript"> var myChart1 = echarts.init(document.getElementById('main1')); var option1 = { title: { text:'ECharts 入门示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] }, yAxis:{}, series: [ { name:'销量', type:'bar', data:[5,20,36,10,10,20] } ] }; myChart1.setOption(option1); var myChart2 = echarts.init(document.getElementById('main2')); myChart2.setOption( { series:[ { name:'访问来源', type:'pie', radius:'55%', // roseType:'angle', //南丁格儿图 data:[ {value:235,name:'视频广告'}, {value:274,name:'联盟广告'}, {value:310,name:'邮件营销'}, {value:335,name:'直接访问'}, {value:400,name:'搜索引擎'} ] } ] } ); var myChart3 = echarts.init(document.getElementById('main3')); var option3 = { backgroundColor: '#2c343c', series : [ { name: '访问来源', type: 'pie', radius: '55%', data:[ {value:235, name:'视频广告'}, {value:274, name:'联盟广告'}, {value:310, name:'邮件营销'}, {value:335, name:'直接访问'}, {value:400, name:'搜索引擎'} ], roseType: 'angle', label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart3.setOption(option3) </script> </html>