echarts经ajax与后端交互数据,绘制柱状图
记得去官网导包。本柱状图y轴要用百分比显示,所以以double类型传入前端显示,再加%。前端<div id="main" style="width: 1800px;height:1200px;"></div>//jsvar zChart = echarts.init(document.getElementById("main"));// 柱形图模板function fun(
·
记得去官网导包。本柱状图y轴要用百分比显示,所以以double类型传入前端显示,再加%。
前端
<div id="main" style="width: 1800px;height:1200px;"></div>
//js
var zChart = echarts.init(document.getElementById("main"));// 柱形图模板
function fun(x_data, y_data) {
var option = {
/*title : {
text : 'ECharts 示例', //主标题文本,支持使用 \n 换行。
link : '', //主标题文本超链接
textStyle : { //该属性用来定义主题文字的颜色、形状等
color : '#3398DB',
}
},*/
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: '{b}<br />{a0}: {c0}%<br />'
},
grid : {
left : '6%',
right : '20%',
bottom : '20%',
containLabel : true
},
xAxis : [ { //x轴列表展示
type : 'category',
data : x_data,
} ],
yAxis : [ { //定义y轴刻度
type : 'value',
scale : true,
name : '百分比',
max : 100,
min : 0,
splitNumber : 10,
boundaryGap : [ 0.2, 0.2 ],
axisLabel: {
show: true,
interval: 0,
formatter: '{value} %' // 给每个数值添加%
}
} ],
series : [ {
name : '占比',
type : 'bar', //bar 柱状图 line 折线图 等
barWidth : '40%', //柱的宽度
data : y_data,
label: {
show: true,
position: 'inside',//数据在中间显示
formatter:'{c}%'//百分比显示
},
itemStyle: {
normal: {
// 颜色随机显示
color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
},
},
} ]
};
zChart.setOption(option);
}
$(function(){
$.ajax({
url : "/asset/echats.do", //请求控制层接口
type : 'GET',
success : function(data) {
fun(data.xData, data.yData);
},
error : function(data){
alert(1);
}
});
});
后端
先建立关于x轴y轴的实体类
public class EchatsRes {
private List<String> xData;
private List<Double> yData;
public List<String> getxData() {
return xData;
}
public void setxData(List<String> xData) {
this.xData = xData;
}
public List<Double> getyData() {
return yData;
}
public void setyData(List<Double> yData) {
this.yData = yData;
}
@Override
public String toString() {
return "EchatsRes [xData=" + xData + ", yData=" + yData + "]";
}
}
控制层
@ResponseBody
@RequestMapping("echats.do")
public EchatsRes echatslist() {
List<String> xList = new ArrayList<String>(); //x轴数据
List<Double> yList = new ArrayList<Double>(); //y轴数据
/*
//获取资产
List<Map<String, Object>> res = assetDao.getAssetBy();
for (Map<String, Object> m : res) {
for (String k : m.keySet()) {
String str = String.valueOf(m.get(k));
if (k.equals("InitialPrice")) { //y
double dou = Double.valueOf(str).doubleValue();
double a = (dou / prices * 100);
String result = String.format("%.2f", a);
yList.add(Double.valueOf(result)); //占总价值比例,保留两位小数
}
}
}
//处理你的数据
......
*/
EchatsRes echatsRes = new EchatsRes();
echatsRes.setxData(xList);
echatsRes.setyData(yList);
return echatsRes;
}

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐
所有评论(0)