servlet
public void getColumnChart(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/json");
response.setCharacterEncoding("utf-8");
List<PW_RepertoryBright> userPowers=echartsDao.echGO();
PrintWriter out=response.getWriter();
out.write(ToJsonUtil.toJson(userPowers));
}
jsp
// 基于准备好的dom,初始化echarts实例
$.get("${ctx}/servlet/EchServlet?type=getColumnChart", function (d) {
data = d.data;
//console.log(data);
var pricesum = 0;
var tradesum = 0;
var quantitysum = 0;
for (i = 0; i < data.length; i++) {
pricesum += parseInt(data[i].price);
tradesum += parseInt(data[i].trade);
quantitysum +=data[i].quantity;
}
var myChart = echarts.init(document.getElementById('main'));
var myChartBY2 = echarts.init(document.getElementById('mainBY2'));
var Luo_er2 = {
title: { x: 'center', text: '库存调拔报表', subtext: '来自中贤', },
tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" /* */ },
toolbox: { show: true, feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
grid: { borderWidth: 0, y: 80, y2: 60 },
//名称
xAxis: [ { type: 'category', show: false, data: ['数量', '调拨价', '金额'] } ],
yAxis: [ { type: 'value', show: false } ],
series: [
{ name: '库存调拔报表', type: 'bar',
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
//颜色
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex];
},
label: { show: true, position: 'top', formatter: '{b}\n{c}' }
}
},
//放入数据
data: [
{ value: quantitysum, name: '数量' },
{ value: tradesum, name: '调拨价' },
{ value: pricesum, name: '金额' },
],
markPoint: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
formatter: function (params) {
return '<img src="'
+ params.data.symbol.replace('image://', '')
+ '"/>';
}
}
}
}
]
};
myChart.setOption(Luo_er2);
)};