echarts 饼图

var option = {//提示框组件,鼠标移动上去显示的提示内容
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。
    },
    //图例
    legend: {
        /*//图例垂直排列
        orient: 'vertical',*/
        x: 'left',
        //data中的名字要与series-data中的列名对应,方可点击操控
        data: ['北京','深圳'],
        left:'center', 
        itemGap:5,
        itemWidth:tlwidth,  //图例标记的图形宽度
        itemHeight:tlhight
    },
    series: [
        {
            type:'pie',
            //饼状图
            radius : '70%', //饼图的大小
            center: ['50%','60%'], //饼图的位置
            avoidLabelOverlap: false,
            //标签
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}',//模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比

                    textStyle : { 
                        align : 'center',
                        baseline : 'middle',
                        fontFamily : '微软雅黑',
                        fontSize : 13,
                        fontWeight : 'bolder'
                    }
                },
            },data : (function(){   //Ajax请求数据
                var arrNum = [];
                var fl=[];
                var js=[];
                $.ajax(
                    {
                        type: "POST",
                        url: viewdataBaseUrl + 'datasourceId=8a0ba0ee6445aad620164d555b9560006',
                        dataType : 'json',
                        async:false,
                        success: function (result) {
                            var data = result.rows;
                            if(data && data.length>0){
                                $.each(data, function(i, item){
                                    fl.push(item.分类);
                                    js.push(item.地区);
                                });

                                for (var i = 0; i < data.length; i++) {
                                    arrNum.push({"value": js[i],"name":fl[i]});
                                }

                            }
                        }
                    });
                return arrNum;
            })()
        }
    ],
    color: ['#e52135','#1e65c1'] //颜色
}

结果就是这样的 图例我没有截图出来 图例大概是这样的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值