echarts饼图配置

js引用和配置div

 <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

View Code

js配置

 1 //获得echarts容器js对象
 2 var dom = document.getElementById("container");
 3 //创建一个echarts实例
 4 var myChart = echarts.init(dom);
 5 var app = {};
 6 option = null;
 7 app.title = '环形图';
 8 //echarts配置项
 9 option = {
10     //提示框组件相关的行为，必须引入提示框组件后才能使用。
11     tooltip: {
12         //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
13         trigger: 'item',
14         //提示信息的格式
15         formatter: "{a} <br/>{b}: {c} ({d}%)"
16     },
17     //图例组件相关的行为，必须引入图例组件后才能使用。
18     legend: {
19         //图例列表的布局朝向。可选：'horizontal'(水平的),'vertical(垂直的)'
20         orient: 'vertical',
21         //位置
22         x: 'left',
23         //图例的数据数组。
24         //data: ['其他时段', '早晨行驶', '夜间行驶', '黄昏行驶']
25         data: ['直接访问', '邮件营销', '联盟广告', '视频广告']
26     },
27     //系列列表。每个系列通过 type 决定自己的图表类型
28     series: [
29         {
30             //系列名称，用于tooltip的显示，
31             name: "访问来源",
32             //饼图,饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
33             type: 'pie',
34             //饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。可以将内半径设大显示成圆环图（Donut chart）。
35             radius: ['50%', '70%'],
36             //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。如果不需要开启该策略，例如圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
37             avoidLabelOverlap: false,
38             //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
39             label: {
40                 //正常情况下
41                 normal: {
42                     //不显示文本标签
43                     show: false,
44                     //在饼图中心位置。
45                     position: 'center'
46                 },
47                 //强调情况下
48                 emphasis: {
49                     //显示文本
50                     show: true,
51                     textStyle: {
52                         //文字的字体大小
53                         fontSize: '30',
54                         //文字字体的粗细
55                         fontWeight: 'bold'
56                     }
57                 }
58             },
59             //标签的视觉引导线样式
60             labelLine: {
61                 normal: {
62                     //是否显示视觉引导线。
63                     show: false
64                 }
65             },
66             data: [
67                 { value: 100, name: '直接访问' },
68                 { value: 200, name: '邮件营销' },
69                 { value: 300, name: '联盟广告' },
70                 { value: 400, name: '视频广告' },
71                
72             ]
73         }
74     ]
75 };
76 if (option && typeof option === "object") {
77     myChart.setOption(option, true);
78 }

View Code