在线等~请教echarts柱状图怎么显示数值

告白气球 2016-11-07 11:42:11
这是我的jsp页面
<script type="text/javascript">
//这里的内容会在文档加载完毕时执行
mini.parse();
$(function(){
$.ajax({
url:"../servlet/ServletTransmit?action=GSPXJA",//要请求的服务器url
//这是一个对象,表示请求的参数,两个参数:method=ajax&val=xxx,服务器可以通过request.getParameter()来获取
//data:{method:"ajaxTest",val:value},
//data:{email:value}, //这里的email对应表单中的name="email",也是发送url中的email=value(GET方式)
async:true, //是否为异步请求
cache:false, //是否缓存结果
type:"get", //请求方式为POST
dataType:"json", //服务器返回的数据是什么类型
success:function(result){ //这个方法会在服务器执行成功是被调用 ,参数result就是服务器返回的值(现在是json类型)
var xAxis="\[";
// var legend="[\'新收\',\'旧存\',\'已结\']";
var legend="[\'新收\',\'已结\']";
var data="[";
for(var i=0;i xAxis+="\'"+result[i].bmmc+"\',";
}
legend=mini.decode(legend);
for(var i=0;i data+="\{name:'"+legend[i]+"',type:'bar',";
var temp="\[";
for(var j=0;j if(legend[i]=="新收")
temp+=result[j].xs+",";
// else if(legend[i]=="旧存")
// temp+=result[j].jc+",";
else if(legend[i]=="已结")
temp+=result[j].yj+",";
}
temp=temp.substring(0, temp.length-1)+"\]";
data+="data:"+temp+"},";
}
xAxis=xAxis.substring(0, xAxis.length-1)+"\]";
data=data.substring(0, data.length-1)+"\]";
// alert(data);
LoadingChart("2016年1月1日至各审判业务部门收结案数情况",legend,mini.decode(xAxis),mini.decode(data),"div1","1");
}
})
});
</script>


-----------------------------------------------------------------------------------------------------------------------------------------------------------------

这是我的 js

mini.parse();
function LoadingChart(text,legend,xAxis,series,div,type){
var xValue="";
var yValue="";
if(type=="1"){
xValue=[{"data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : {"show":true,"rotate": 30,"interval": '0'},"type":'category'}];
yValue={"type" : 'value'};
}
else{
yValue=[{"data":xAxis,"boundaryGap" : [ '80%', '80%' ],"axisLabel" : {"show":true,"rotate": 30,"interval": '0'},"type":'category'}];
xValue=[{"type" : 'value'}];

}
var json =
{
"animationDuration":3500,
"title" :
{
"text" : text,
"x" : 'center',
"textStyle":
{
"fontSize":'24px',
"color":'#34A1D6',
"fontFamily":'宋体'
}
},
"color":['#0a6db3','#fb7c00','#D97A80','#2EC8CA','#FEB980','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6b8e23','#ff00ff','#3cb371','#b8860b','#30e0e0'],
"backgroundColor":'#E7F3FF',
"tooltip" : {
"trigger": 'axis',
"textStyle":
{
"fontSize":15,
"fontFamily":'宋体'
}
},
"calculable" : true,
"legend" :
{
"show" : (legend.length > 1 ? true : false),
"orient" : 'horizontal',
"x" : 'center',
"y":'30',
"data" : legend,
"itemWidth": 14,
"itemHeight":10,
"padding":3,
"itemGap":3,
"textStyle":
{
"fontSize":"16px",
"fontFamily":'宋体'
}
},
"toolbox":
{
"show" : true,
"x":'right',
"y":'top',
"itemSize":14,
"itemGap":5,
"feature" :
{
"dataView" :
{
"show" : true,
"readOnly": true,
},
"saveAsImage" :
{
"show" : true
}
}
},
"xAxis" :xValue,
"yAxis" : yValue,
"series" : series,
"series" : { itemStyle: { normal: {label : {show: true, position: 'top'}}}}


};
var myChart = echarts.init(document.getElementById(div));
myChart.setOption(json);
}

求大神帮忙,小女子万分感激
...全文
13573 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_20910969 2016-12-02
  • 打赏
  • 举报
回复
私聊 ,最近一直在做图表。l_jk@winning.com.cn
翻越高山 2016-12-01
  • 打赏
  • 举报
回复
var series=[]; var dataValue=result.data;// 后台返回的json 数组 for(var i=0;i<dataValue.length;i++){ series.push({ name:dataValue[i].name, type:'bar', data:eval("("+dataValue[i].data+")"), //此处加上上面那段就能实现了 });
SSHorSSM 2016-12-01
  • 打赏
  • 举报
回复
貌似。。。。1.3.0版本才有这个功能吧
翻越高山 2016-12-01
  • 打赏
  • 举报
回复
柱状图顶部标签,非0显示,加在series中 itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#615a5a' }, formatter:function(params){ if(params.value==0){ return ''; }else { return params.value; } } } } }
little_how 2016-11-07
  • 打赏
  • 举报
回复
首先配置项手册地址: http://echarts.baidu.com/option.html#series-bar 然后里面的label标签就是你需要的显示数值的,在series里面,显示可以用 formatter的字符串或者函数,具体你看自己的需求咯
vswen5 2016-11-07
  • 打赏
  • 举报
回复
首先你先找个例子 静态数据看看行不行。 然后在填充动态数据

81,091

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧