最近在学校使用echarts遇到的一个小知识点。有一定的特殊性…
{
“clause”:[“保护费”,”花费”],”保护费”:[“100.5”,”150”,”116.5”,”321”,”54”,”22”,”111”,”321”,”132”,”122”,”90”,”87”],”花费”:[“200.5”,”120”,”276.5”,”666”,”321”,”167”,”238”,”543”,”234”,”156”,”455”,”321”]
}
这是后台自己封装的json格式 clause 为所有统计的项目。后面是具体某个统计项12个月的数值。
然后就是在前台做数据填充。
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type:'post',
url:'springmvc请求',
dataType:"json",
success:function(result){
setBarOption(myChart,result);
}
});
function setBarOption(id,data){
// 指定图表的配置项和数据
var commonBarOption = {
tooltip : {
....略
},
legend: {
data:data.clause //展示标题
},
grid: {
...略
},
xAxis : [
{
type : 'category',
data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
}
],
yAxis : [
{
type : 'value'
}
],
series : showMessageBar(data)
};
// 使用刚指定的配置项和数据显示图表。
id.setOption(commonBarOption);
}
//数据展示 参考和借鉴了很多大神的代码。。嘿嘿。。
function showMessageBar(data){
var serie = [];
var len = Object.keys(data).length;// 获得data数据长度
for(var i = 0; i < (len-1); i++){ // 因为clause为统计项。所有少一次遍历
var item = {
name:data.clause[i],
type:'bar',
data:data[data.clause[i]]
}
serie.push(item);
};
return serie;
}
参考和借鉴了很多大神的代码。。嘿嘿。。 有能让我等小程序猿获益良多~!
By Autumn 2017年5月31日