注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

勇气

终生读书

 
 
 

日志

 
 

调取后端数据循环显示echarts图表  

2016-04-19 18:16:17|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

//html部分

@section('javascript')
<script src="{{url('js/home/history.js')}}"></script>
<script src="http://jiuye.hxsd.test/js/webjob/esl.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" defer="defer">
var chartData = jQuery.parseJSON('<?php echo $chartData;?>');
historyObj = new historyObj();
$.each(chartData, function (key, val) {
legendCount = val.length; //作业数
seriesData = val;
historyObj.getCharts(key, legendCount, seriesData);
});
</script>
@stop

//js部分

//历史任务成绩
;
(function () {
'use strict';
var historyObj = function (options, callback, failCallback) {
this.getCharts = function(chartKey, legendCount, seriesData) {
var legendData = [];//图例数组
var seriesVar = [];//成绩数组
var versions = ["V1","V2","V3","V4","V5"];//版本数组
//获取图例数组和成绩数组
for (var i = 0; i < legendCount; i++) {
legendData[i] = '作业' + (i + 1);
}
for (var j = 0; j < legendCount; j++) {
seriesVar[j] = {name: legendData[j], type: 'bar', data: seriesData[j]};
}
//配置目录和文件
require.config({
paths: {
'echarts': './js/echarts',
'echarts/chart/bar': './js/echarts'
}
});
//DrawEChart:回调函数
require(['echarts', 'echarts/chart/bar'], DrawEChart);
//渲染ECharts图表
function DrawEChart(ec) {
//图表渲染的容器对象
var chartContainer = document.getElementById("lineChart" + chartKey);
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption({
//图表标题
title: {
text: "本任务成绩变化",
textStyle: {
fontSize: 12,
color: '#4185A7'
}
},
//数据提示框配置 循环显示:
tooltip: {
trigger: 'axis',
formatter: function (a) {
var relVal = "";
for (var i = 0; i < legendData.length; i++) {
if (a[i][2]) {
relVal += a[i][0] + ':' + getGrade(a[i][2]) + "<br/>"; //作业i
}
}
return relVal;
}
},
//工具箱配置
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false}, // 数据视图
magicType: {show: true, type: ['line', 'bar']}, //折线图和柱形图切换
}
},
calculable: true,
xAxis: [ //x轴配置
{
type: 'category',
data: versions,
name: "版本"
}
],
yAxis: [ //Y轴配置
{
type: 'value',
splitArea: {show: true},
name: "成绩"
}
],
legend: { //图例配置
data: legendData,
y: "top"
},
series: seriesVar //图表Series数据序列配置
});
}
};

//成绩用字母等级来表示
function getGrade(score)
{
if (score >= 90) {
return 'A'
}
else if (score >= 80 && score < 90) {
return 'B'
}
else if (score >= 70 && score < 80) {
return 'C'
}
else if (score >= 60 && score < 70) {
return 'D'
}
else if (score >= 50 && score < 60) {
return 'E'
}
else if (score < 50) {
return 'F'
}
else {
return '-';
}
}

};
window.historyObj = historyObj;
})();


//php json数据格式
$chartData = "{"307":[[86,69],[77]],"308":[[38,66,76,74,94,96,86,89,89,92],[21],[57],[94]]}"

//图
调取后端数据循环显示echarts图表 - 勇气 - 勇气
 
  评论这张
 
阅读(158)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017