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>

js配置

 //获得echarts容器js对象
 var dom = document.getElementById("container");
 //创建一个echarts实例
 var myChart = echarts.init(dom);
 var app = {};
 option = null;
 app.title = '环形图';
 //echarts配置项
 option = {
     //提示框组件相关的行为，必须引入提示框组件后才能使用。
     tooltip: {
         //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
         trigger: 'item',
         //提示信息的格式
         formatter: "{a} <br/>{b}: {c} ({d}%)"
     },
     //图例组件相关的行为，必须引入图例组件后才能使用。
     legend: {
         //图例列表的布局朝向。可选：'horizontal'(水平的),'vertical(垂直的)'
         orient: 'vertical',
         //位置
         x: 'left',
         //图例的数据数组。
         //data: ['其他时段', '早晨行驶', '夜间行驶', '黄昏行驶']
         data: ['直接访问', '邮件营销', '联盟广告', '视频广告']
     },
     //系列列表。每个系列通过 type 决定自己的图表类型
     series: [
         {
             //系列名称，用于tooltip的显示，
             name: "访问来源",
             //饼图,饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
             type: 'pie',
             //饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。可以将内半径设大显示成圆环图（Donut chart）。
             radius: ['50%', '70%'],
             //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。如果不需要开启该策略，例如圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
             avoidLabelOverlap: false,
             //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
             label: {
                 //正常情况下
                 normal: {
                     //不显示文本标签
                     show: false,
                     //在饼图中心位置。
                     position: 'center'
                 },
                 //强调情况下
                 emphasis: {
                     //显示文本
                     show: true,
                     textStyle: {
                         //文字的字体大小
                         fontSize: '30',
                         //文字字体的粗细
                         fontWeight: 'bold'
                     }
                 }
             },
             //标签的视觉引导线样式
             labelLine: {
                 normal: {
                     //是否显示视觉引导线。
                     show: false
                 }
             },
             data: [
                 { value: 100, name: '直接访问' },
                 { value: 200, name: '邮件营销' },
                 { value: 300, name: '联盟广告' },
                 { value: 400, name: '视频广告' },
 
             ]
         }
     ]
 };
 if (option && typeof option === "object") {
     myChart.setOption(option, true);
 }