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'] //颜色
}
结果就是这样的 图例我没有截图出来 图例大概是这样的