module.exports = function(weekNormal,weekHeight,weekLow,monthNormal,monthHeight,monthLow){
//周
var weekNormaldataset = []
var weekHeightdataset = []
var weekLowdataset = []
weekNormaldataset[0] = weekNormal
weekNormaldataset[1] = 100 - weekNormaldataset[0]
weekHeightdataset[0] = weekHeight
weekHeightdataset[1] = 100 - weekHeightdataset[0]
weekLowdataset[0] = weekLow
weekLowdataset[1] = 100 - weekLowdataset[0]
//月
var monthNormaldataset = []
var monthHeightdataset = []
var monthLowdataset = []
monthNormaldataset[0] = monthNormal
monthNormaldataset[1] = 100 - monthNormaldataset[0]
monthHeightdataset[0] = monthHeight
monthHeightdataset[1] = 100 - monthHeightdataset[0]
monthLowdataset[0] = monthLow
monthLowdataset[1] = 100 - monthLowdataset[0]
var width = 100
var height = 100
//周
var svg = d3.select(".oneWeekNormal")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg1 = d3.select(".oneWeekHeight")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg2 = d3.select(".oneWeekLow")
.append("svg")
.attr("width", width)
.attr("height", height)
//月
var svg3 = d3.select(".oneMonthNormal")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg4 = d3.select(".oneMonthHeight")
.append("svg")
.attr("width", width)
.attr("height", height)
var svg5 = d3.select(".oneMonthLow")
.append("svg")
.attr("width", width)
.attr("height", height)
var pie = d3.layout.pie()
//周
var weekNormalpiedata = pie(weekNormaldataset)
var weekHeightpiedata = pie(weekHeightdataset)
var weekLowpiedata = pie(weekLowdataset)
//月
var monthNormalpiedata = pie(monthNormaldataset)
var monthHeightpiedata = pie(monthHeightdataset)
var monthLowpiedata = pie(monthLowdataset)
var outerRadius = 50//外半径
var innerRadius = 40//内半径,为0则中间没有空白
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius)//设置外半径
var normalColor = ['#1BBD8F', '#E8EBED']
var heightColor = ['#FF455B', '#E8EBED']
var lowColor = ['#FF970C', '#E8EBED']
//周
var arcs = svg.selectAll("g")
.data(weekNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs1 = svg1.selectAll("g")
.data(weekHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs1.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs2 = svg2.selectAll("g")
.data(weekLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs2.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i]
})
.attr("d",function(d){
return arc(d)
})
//月
var arcs3 = svg3.selectAll("g")
.data(monthNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs3.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i]
})
.attr("d",function(d){
return arc(d)
})
console.log(arcs3)
var arcs4 = svg4.selectAll("g")
.data(monthHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs4.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i]
})
.attr("d",function(d){
return arc(d)
})
var arcs5 = svg5.selectAll("g")
.data(monthLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")")
arcs5.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i]
})
.attr("d",function(d){
return arc(d)
})
//周
arcs.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekNormaldataset[0]+"%"
})
arcs1.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekHeightdataset[0]+"%"
})
arcs2.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekLowdataset[0]+"%"
})
//月
arcs3.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthNormaldataset[0]+"%"
})
arcs4.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthHeightdataset[0]+"%"
})
arcs5.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthLowdataset[0]+"%"
})
}
}).call(this)
//参考地址http://echarts.baidu.com/去网站下js控件,下面是饼图的代码,下图是我的代码效果function query1(housetype,redStatisticsList,text0,cashingSum,tranferSum){
<!--红包发放数据-->
var myrodiusred = echarts.init(document.getElementById('mainrodius'))//ID
var redHousehold = housetype
var redMoney = redStatisticsList
var allMoney = 0//总金额
$.each(redStatisticsList,function(index,item){
allMoney =allMoney+ Number(item.value)
})
optionTwo = {
title : {
text: text0,
subtext: "总金额:"+allMoney+"\n\n提现总额:"+cashingSum+"\n\n到账总额:"+tranferSum,
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: housetype
},
series : [
{
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:redMoney,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myrodiusred.setOption(optionTwo)
}