ECharts入门一

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

posted @ 2018-01-05 11:49  carsonwuu  阅读(420)  评论(0)  编辑  收藏  举报