因为我的需求是需要有图例，所以pie图的创建用的是封装好的pie图制作工具生成的，图例是自己添加的，以后我会写一篇用代码写出pie图的文章，敬请期待。

1、效果

2、html页面

 <div id="pieEquips"></div>

3、js

<script src="~/Scripts/d3.v3.min.js"></script> //d3.js必须引用的
<script src="~/Scripts/d3/d3pie.js"></script>  //官网上封装好的pie图的js

// 调用方法传递图数据
grid.load(obj, function (result) {if (result.total > 0) {//grid.setData(mini.decode(result.data));//grid.setTotalCount(result.total);pieEquips(result.result.pieData, dimension);pieValue(result.result.pieData, dimension);} else {mini.alert("没有查询到相关数据，请重新筛选！");}
}, function (e) {mini.alert("出现错误，请重新查询！");
});

//台数pie图的创建function pieEquips(data, chartName) {$('#pieEquips').html('');// 处理json数据var pieData = [];for (var i = 0; i < data.length; i++) {pieData.push({label: data[i].CodeName,value: data[i].Number});}// pie图配置，这个事官网上封装好的pie图制作工具生成的配置文件，有些地方需要修改var pie = new d3pie("pieEquips", {header: {title: {text: "按" + chartName + "：台数"}},size: {"canvasHeight": 400,"canvasWidth": 500},data: {content: pieData},labels: {outer: {"format": "none",}},misc: {canvasPadding: {//top: 0,right: 100,//bottom: 0,//left: 0}},tooltips: {enabled: true,type: "placeholder",string: "{label}: {value}台-{percentage}%",styles: {fadeInSpeed: 500,backgroundColor: "#00cc99",backgroundOpacity: 0.8,color: "#ffffcc",borderRadius: 4,font: "verdana",fontSize: 20,padding: 20}}});// 下面的代码就是我在生成的pie图之上，获取svg整个图对象，然后添加图例和名称，其实只要//学好d3.js的api方法，什么样的图都能画出来，当然这很难。var temp = 30; //高度增量var svg = d3.select("#pieEquips svg"); //获取饼图对象// 添加legendsvg.append("g").selectAll(".legendRect").data(pie.options.colors).enter().append("rect").attr("class", "legendRect").attr("x", function() { return pie.options.size.canvasWidth - 100; }).attr("y", function() { temp = temp + 20;return temp; }).attr("width", 10).attr("height", 10).style("fill", function(d) { return d; });// 添加legend名称temp = 38;svg.append("g").selectAll(".legendText").data(pie.options.data.content).enter().append("text").attr("class", "legendText").attr("x", function(d) { return pie.options.size.canvasWidth - 60; }).attr("y", function(d) { temp = temp + 20;return temp; }).attr("dx", ".35em").attr("dy", 0).attr("text-anchor", "middle")//默认左对齐，middle中对齐，end右对齐.text(function(d) { return d.label; });}