87,992
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
qq_30191473 2017-05-31
- 打赏
- 举报
保证mealsEatObject有字段就能显示啦
baidu_27549073 2017-05-28
- 打赏
- 举报
代码太多了，我的结论是ajax有数据也不会显示
liu2698747225 2017-05-19
- 打赏
- 举报
不显示不显示
Jas_wen 2017-05-19
- 打赏
- 举报
求帮助啊，，
Jas_wen 2017-05-19
- 打赏
- 举报
没人吗？，，
Jas_wen 2017-05-19
- 打赏
- 举报
<script type="text/javascript">
require.config({
packages: [
{
name: 'zrender',
location: '${pageContext.request.contextPath}/admin/statistics/zrender-2.0.4/src', // zrender与echarts在同一级目录
main: 'zrender'
},
{
name: 'echarts',
location: '${pageContext.request.contextPath}/admin/statistics/echarts-2.0.4/src',
main: 'echarts'
}
]
});
function showpie(){
require(
[
'echarts',
'echarts/chart/funnel',
'echarts/chart/pie'
],
//渲染ECharts图表
function changeScool(ec){
var dataObj;
var legendObj;
var mindate=$("#mindate").val();
var maxdate = $("#maxdate").val();
$.ajax({
async:false,
type: "POST",
url: "${pageContext.request.contextPath}/mealsManage_listMeals.do?method=mealsEatPie",
data: {mindate:mindate,maxdate:maxdate},
dataType: "json",
success: function(data){
dataObj = data.dataObj;
legendObj = data.legendObj;
document.getElementById("mindate").value = data.minDate;
document.getElementById("maxdate").value = data.maxDate;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("调用/mealsManage_listMeals.do?method=mealsEatPie出现错误");
}
});
//图表渲染的容器对象
var chartContainer = document.getElementById("myChart1");
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption ({
title : {
text: '用餐人数分析',
subtext: '用餐人数分析',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:legendObj
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'用餐人数分析',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:dataObj
}
]
});
}
);
}
showpie();
showbar();
</script>
<script type="text/javascript">
function search(){
//showTable();
showpie();
showbar();
}
//showTable();
</script>
<script type="text/javascript">
require.config({
packages: [
{
name: 'zrender',
location: '${pageContext.request.contextPath}/admin/statistics/zrender-2.0.4/src', // zrender与echarts在同一级目录
main: 'zrender'
},
{
name: 'echarts',
location: '${pageContext.request.contextPath}/admin/statistics/echarts-2.0.4/src',
main: 'echarts'
}
]
});
function showbar(){
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
//渲染ECharts图表
function changeScool(ec){
var mealsEatObject;
var dataObject;
var mindate=$("#mindate").val();
var maxdate = $("#maxdate").val();
$.ajax({
async:false,
type: "POST",
url: "${pageContext.request.contextPath}/mealsManage_listMeals.do?method=mealsEatBar",
data: {mindate:mindate,maxdate:maxdate},
dataType: "json",
success: function(data){
dataObject = data.dataObject;
mealsEatObject=data.mealsEatObject;
document.getElementById("mindate").value = data.minDate;
document.getElementById("maxdate").value = data.maxDate;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("调用/mealsManage_listMeals.do?method=mealsEatBar出现错误");
}
});
//图表渲染的容器对象
var chartContainer = document.getElementById("myChart2");
//加载图表
var myChart = ec.init(chartContainer);
myChart.setOption ({
title : {
text: '用餐人数',
subtext: '用餐人数'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['用餐人数']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : mealsEatObject
}
],
yAxis : [
{
type : 'value'
}
],
series : dataObject
});
}
);
}
</script>
ECharts 极坐标柱状图教程：自定义标签位置与样式，轻松实现数据可视化」 「前端数据可视化：ECharts 极坐标柱状图实战，附完整代码与详细注释」 「ECharts 极坐标柱状图入门：从零开始实
