echart 饼图处理 数据格式化 option动态赋值 点击事件处理
系统工程是ssm框架的
我是把后台需要的数据格式，直接在前台处理后响应的，也可以在前台处理的，
遇到两个问题当时：
**1，开始往jsonarray中add时出现了数据覆盖的问题，打印出$ref
解决：jsonObject的put方法，每次的key相同了，覆盖了之前的。
2，在点击事件那里，官网的例子是可以用的，但是我用了，直接中option的series的data中取不到值，无法循环，后来用myChart.getOption，就可以取到option中series的data数据了**
前端jsp：
<div id="wrong-message" style="color:blue; font:bold 20px 宋体;">div>
<div id="main" style="height: 400px">div>
<script type="text/javascript">
var myChart;
var eCharts;
require.config({
paths : {
'echarts' : '${pageContext.request.contextPath}/ultrapower/echarts.js',
'echarts/chart/pie' : '${pageContext.request.contextPath}/ultrapower/echarts.js',
'echarts/chart/funnel' : '${pageContext.request.contextPath}/ultrapower/echarts.js'
}
});
require([
'echarts',
'echarts/chart/pie', // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
],
function(ec) {
eCharts = ec;
myChart = eCharts.init(document.getElementById('main'));
var option = {
title : {
text: '商家快递选择',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
//show: true,
type: ['pie']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
//饼图外圈线
calculable : false,
series : [
{
name:'快递公司',
type:'pie',
selectedMode: 'single',
radius : [100, 140],
//center: ['50%', '60%'],
//饼图样式，是否显示链接线
itemStyle : {
normal : {
labelLine : {
show : true
}
}
},
data:[]
}
]
};
myChart.hideLoading();
myChart.setOption(option); //先把可选项注入myChart中
getChartData();//ajax后台交互
function getChartData() {
//获得图表的options对象
var optionsAjax = myChart.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url:"${pageContext.request.contextPath}/order/login/pie_data.do",
//data:{},
dataType:"json", //返回数据形式为json
success:function(result) {
// alert("success");
//alert(result);
if (result) {
optionsAjax.legend.data = result[0].legend;
optionsAjax.series[0].data = result[0].series;
//options.xAxis[0].data = result.category;
myChart.hideLoading();
myChart.setOption(optionsAjax);
/* alert("ajax赋值成功");
var aaa = myChart.getOption().series[0].data[0].name;
alert(aaa); */
}
},
error : function(errorMsg) {
alert("不好意思，请求数据出错");
myChart.hideLoading();
}
});
};
//饼图的点击事件
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){
var selected = param.selected;
var serie;
var str = '当前选择： ';
for (var idx in selected) {
serie = myChart.getOption().series[idx];
for (var i = 0, l = serie.data.length; i < l; i++) {
if (selected[idx][i]) {
/* str += '【系列' + idx + '】' + serie.name + ' : ' +
'【数据' + i + '】' + serie.data[i].name + ' '; */
str += '【快递公司】' + serie.data[i].name + ' : ' +
'【选择数据】' + serie.data[i].value + ' '+
'【占比】' + (serie.data[i].value/10)*100 + '% ';
}
}
}
document.getElementById('wrong-message').innerHTML = str;
/* var selected = param.selected;
var serie;
serie = myChart.getOption().series[0];
if (jQuery.inArray(true, selected[0]) > -1) {
alert("进入data处理前");
for (var i = 0; i < serie.data.length; i++) {
if (selected[0][i]) {
alert("赋值");
alert(serie.data[i].name);
//$("#wrong-message").val(serie.data[i].name); serie.data[i].name
document.getElementById('wrong-message').innerHTML = serie.data[i].name;
}
}
}
else {
alert("false");
} */
});
});后台java处理
@RequestMapping("/login/pie_data.do")
public void pieData(HttpServletRequest request,
HttpServletResponse response) throws IOException {
PageInfo<TbOrder> pageInfo = (PageInfo<TbOrder>) request.getSession().getAttribute("pageInfo");
List<TbOrder> list = null;
if(pageInfo != null){
list = pageInfo.getList();
}
Map<String,Integer> map = new HashMap<String,Integer>();
if(list !=null && list.size()>0){
List<TbOrder> listTbOrder = new ArrayList<TbOrder>();
for (int i = 0; i < list.size(); i++) {
TbOrder tbOrder = list.get(i);
listTbOrder.add(tbOrder);
}
for(int x = 0; x < listTbOrder.size(); x ++)
{
String expressCompany = listTbOrder.get(x).getExpressCompany();
int num = 1;
if(!map.containsKey(expressCompany))
{
map.put(expressCompany, 1);
} else
{
num =map.get(expressCompany); //这是一个应该注意的,此时要记住之前的value值,再此基础上+1
map.put(expressCompany, ++num);
}
}
}
// JSONArray arr = new JSONArray();
JSONArray arrl = new JSONArray();
List<String> legend = new ArrayList<String>();
List<JSONObject> series = new ArrayList<JSONObject>();
JSONObject jobl = new JSONObject();
for(String name :map.keySet()){
JSONObject job = new JSONObject();
Integer value = map.get(name);
/* job.put(""+name+"",value);*/
job.put("value",value);
job.put("name",name);
legend.add(name);
series.add(job);
}
jobl.put("legend", legend);
jobl.put("series", series);
arrl.add(jobl);;
//给图表添加数据
response.getWriter().write(arrl.toString());
//响应回json数据
}