关于echarts一个饼图案例的问题

Question

http://gallery.echartsjs.com/...

请问下有人知道怎么把这echarts里的6个饼图放一行吗

Answer 1

这个问题我先在群里问到了，第一种解决方案就是调center的值，还有一种就是做六个div，一个div对应一个饼图，个人觉得第二种更灵活，但是还没实现的思路

Answer 2

通过修改option的配置项的参数：如下


改变他们的半径和中心点的位置可以实现你想要的布局！

Answer 3

先看下文档吧
radius代表半径
center代表中心坐标点
我随便改了下实现了6个在一行，具体的你看完文档再自己探索

pieFormat=function (obj) {
    if(obj.name=="别人家的孩子"){
         return obj.seriesName+"："+(obj.percent)+"%";
    }
    return obj.name+"："+(obj.percent)+"%";
};

formatValue=function (obj) {
    return formatNumber(obj.value);
};

formatNameValue=function (obj) {
    return obj.name+"："+formatNumber(obj.value);
};


userFormFormat=function (obj) {
    if(obj.name=="干儿子"||obj.name=="亲儿子"){
         return obj.seriesName+"："+(obj.percent)+"%";
    }
    return (obj.percent)+"%";
};


formatNumber=function(n){
   var b=parseInt(n).toString();
   var len=b.length;
   if(len<=3){return b;}
   var r=len%3;
   return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
};

option ={
  "title" : {
    "text" : "\n67373观众来源：20170212-20170218"
  },
  "legend" : {
    "data" : [ "亲儿子", "干儿子", "别人家的孩子", null, null, null, null, null, null, null, null, null, null, null, null ]
  },
  "series" : [ {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "女流66",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "9297"
    }, {
      "name" : "别人家的孩子",
      "value" : "53057"
    }, {
      "name" : "亲儿子",
      "value" : "119032"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "10%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "9297"
    }, {
      "name" : "别人家的孩子",
      "value" : "53057"
    }, {
      "name" : "亲儿子",
      "value" : "119032"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "10%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  }, {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "冯提莫",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "8814"
    }, {
      "name" : "别人家的孩子",
      "value" : "113171"
    }, {
      "name" : "亲儿子",
      "value" : "119515"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "25%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "8814"
    }, {
      "name" : "别人家的孩子",
      "value" : "113171"
    }, {
      "name" : "亲儿子",
      "value" : "119515"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "25%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  }, {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "刘飞儿faye",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "4460"
    }, {
      "name" : "别人家的孩子",
      "value" : "44476"
    }, {
      "name" : "亲儿子",
      "value" : "123869"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "40%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "4460"
    }, {
      "name" : "别人家的孩子",
      "value" : "44476"
    }, {
      "name" : "亲儿子",
      "value" : "123869"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "40%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  }, {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "赵小臭",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "3061"
    }, {
      "name" : "别人家的孩子",
      "value" : "29294"
    }, {
      "name" : "亲儿子",
      "value" : "125268"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "55%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "3061"
    }, {
      "name" : "别人家的孩子",
      "value" : "29294"
    }, {
      "name" : "亲儿子",
      "value" : "125268"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "55%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  }, {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "萌面酥",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "2064"
    }, {
      "name" : "别人家的孩子",
      "value" : "45268"
    }, {
      "name" : "亲儿子",
      "value" : "126265"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "70%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "2064"
    }, {
      "name" : "别人家的孩子",
      "value" : "45268"
    }, {
      "name" : "亲儿子",
      "value" : "126265"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "70%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  }, {
    "color" : [ "#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67" ],
    "name" : "丸子哟",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "1790"
    }, {
      "name" : "别人家的孩子",
      "value" : "29243"
    }, {
      "name" : "亲儿子",
      "value" : "126539"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : pieFormat,
        "textStyle" : { }
      }
    },
    "radius" : "10%",
    "center" : [ "85%", "30%" ]
  }, {
    "name" : "",
    "type" : "pie",
    "data" : [ {
      "name" : "干儿子",
      "value" : "1790"
    }, {
      "name" : "别人家的孩子",
      "value" : "29243"
    }, {
      "name" : "亲儿子",
      "value" : "126539"
    } ],
    "label" : {
      "normal" : {
        "position" : "inner",
        "formatter" : formatValue,
        "textStyle" : {
          "fontSize" : 14,
          "color" : "#777777"
        }
      }
    },
    "radius" : [ "10%", "20%" ],
    "center" : [ "85%", "30%" ],
    "itemStyle" : {
      "normal" : {
        "color" : "#F2F2F2"
      },
      "emphasis" : {
        "color" : "#ADADAD"
      }
    }
  } ],
  "tooltip" : {
    "trigger" : ""
  },
  "toolbox" : { },
  "color" : [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3" ]
}