echart中饼图的简单使用

第一步：创建容器<div id="ec" style="width:600px; height: 400px;"></div>
第二步：引入js/echarts.min.js的js文件
第三步：// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('ec'));
第四步：指定图表的配置项和数据
    var option = {
            tooltip : {
                trigger : 'item',
                formatter : "{b} ({d}%)"
            },
         /*tooltip的trigger的值可以有‘item’，‘axis’
        ‘item’:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
        ‘axis’：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        formatter：
        折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
        散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
        地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
        饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）*/
            legend : {
                    //默认横向布局，纵向布局值为'vertical'
                    orient : 'horizontal',
                    x : '20',
                    y : '190',
                    data : []
                },
            series : [ {
                        type : 'pie',//指定为饼图
                        radius : [ '40%', '60%' ],//饼图的半径，数组的第一项是内半径，第二项是外半径。
                                       // 支持设置成百分比，相对于容器高宽中较小的一项的一半。
                                       // 可以将内半径设大显示成圆环图（Donut chart）。
                        center : [ '50%', '100' ],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                                        支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                        avoidLabelOverlap : false,//是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
                                        如果不需要开启该策略，例如圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
                        label : {          //饼图图形上的文本标签
                            normal : {
                                show : false,
                                position : 'center'
                            },
                            emphasis : {
                                show : true,
                                textStyle : {
                                    fontSize : '10',
                                    fontWeight : 'bold'
                                }
                            }
                        },
                        labelLine : {        //标签的视觉引导线样式
                            normal : {
                                show : false
                            }
                        },
                        data : [ {        //系列中的数据内容数组
                            value : 
                            name : 
                        } ]
                    } ]
                }
            /* 点击事件 */
                 myChart.on('click', function(params) {
                    gcxmToPage(params.name);
                });
            // 使用刚指定的配置项和数据显示图表。
                 myChart.setOption(option);        

        

转载于:https://my.oschina.net/u/3601306/blog/1526436