1.在 Jsp页面显示 数据的的 柱状图,
使用百度的 插件:Echarts --
<script src="echarts.js"></script>
就在 先在 页面 引入 echarts.js文件
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 麻烦的 就是 数据的 插入,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
__________________________________________
转化为 ajax中 就是:
$(function(){
$.ajax({
type: "GET",
url: "useract_loadPremission.action",
dataType: "json",
success: function(data){
// alert(JSON.stringify(data));
var dt = data.tps;//所有的权限
可以直接用 dt[i].id 遍历,因为 是 struts直接 转换成了 json对象
var myChart =echarts.init(document.getElementById("main"));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:"销量",
type:"bar", 现在 主要 就是 把 怎么data生成
data:[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(option);
},
error:function(data){
alert(JSON.stringify(data)); //
}
});
});
——————————————————————————
var json= data.tps;//所有的权限
var item = function() {
return {
name : '分数',
type : 'bar',
data : []
};
};//产生柱状图数组
var series = [];
var score = [];//分数信息
var tb = item();
for(var i=0;i<json.length;i++){
alert(',.a取值dfs,.'+json[i].id);
score.push(parseInt(json[i].id));
}
tb.data = score;
series.push(tb);//数据
var option = {
series : series
};
myChart.setOption(option);