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' 将饼图显示成南丁格尔图
