我这个是使用的echarts的饼图,如果需要使用到其他的图形,可以在echarts的官网上面去找找,上面各种的图都有例子
option = {
title : {
//图中2的位置
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图中1的位置
},
series : [ //图中3的位置
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
//这下面就是你从数据库中查询的结果
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
} }]}
数据具体怎么从后台传送到前台来,楼主应该知道的吧,我这儿就不说了,望采纳!
//参考地址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)
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)