ECharts入门一
完整的一个饼状图网页可运行源码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 8 </head> 9 <body> 10 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 11 <div id="main" style="width: 600px;height:400px;"></div> 12 <script type="text/javascript"> 13 // 基于准备好的dom，初始化echarts实例 14 15 var myChart = echarts.init(document.getElementById(‘main‘)); 16 17 // 指定图表的配置项和数据 18 option = { 19 backgroundColor: ‘#2c343c‘, 20 series : [ 21 { 22 name: ‘访问来源‘, 23 type: ‘pie‘, 24 radius: ‘55%‘, 25 data:[ 26 {value:235, name:‘视频广告‘}, 27 {value:274, name:‘联盟广告‘}, 28 {value:310, name:‘邮件营销‘}, 29 {value:335, name:‘直接访问‘}, 30 {value:400, name:‘搜索引擎‘} 31 ], 32 33 roseType: ‘angle‘, 34 label: { 35 normal: { 36 textStyle: { 37 color: ‘rgba(255, 255, 255, 0.3)‘ 38 } 39 } 40 }, 41 labelLine: { 42 normal: { 43 lineStyle: { 44 color: ‘rgba(255, 255, 255, 0.3)‘ 45 } 46 } 47 }, 48 itemStyle: { 49 normal: { 50 shadowBlur: 200, 51 shadowColor: ‘rgba(0, 0, 0, 0.5)‘ 52 } 53 } 54 } 55 ] 56 }; 57 58 // 使用刚指定的配置项和数据显示图表。 59 myChart.setOption(option); 60 </script> 61 </body> 62 </html>
解析：
1.可以通过require加载需要使用到的模块，默认是require(‘echarts‘),加载的是所有的图表和组件的ECharts包。
2.type:‘pie‘ 饼状型表格
3.radius:‘55%‘ 半径大小
4.data内含有name和value属性
5.itemStyle是一些通用样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等。
其中emphasis(是鼠标hover悬停事件的高亮样式)、normal(正常展示下的样式)
6.backgroundColor: ‘#2c343c‘ 背景颜色
7.textStyle 字体样式
8.lineStyle 边线样式
9.roseType: ‘angle‘ 将饼图显示成南丁格尔图