社区
JavaScript
帖子详情
ECharts 没有数据时柱状图不显示
Jas_wen
2017-05-19 02:47:08
...全文
3120
6
打赏
收藏
ECharts 没有数据时柱状图不显示
[图片]
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
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
+ajax+java+mysql实现饼图+折线图+
柱状图
对
Echarts
3.0的基本图表实现,即饼图,折线图,
柱状图
。 从
数据
库读取
数据
显示
在前台,图表可根据
数据
库
数据
实
时
更新。
echarts
地图上实现
柱状图
echarts
地图上放
柱状图
,
echarts
柱状图
和地图,
echarts
地图和
柱状图
【
echarts
】
柱状图
上方
显示
数值
使用官网的例子,只不过加了itemStyle属性 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>
ECharts
<...-- 为
ECharts
准备一个具备大小(宽高)的Dom --> &...
layuiAdmin +
echarts
动态
数据
:
柱状图
应用
layuiAdmin +
echarts
动态
数据
:
柱状图
开发(含案例、代码、截图) 项目需求:用layuiAdmin框架写的后台,需要把返回的基金
数据
用
echarts
模块,实现页面可视化与
数据
实
时
更新。 对于
echarts
.js官方而言,单独实现...
echarts
柱状图
顶部增加数字
显示
在
ECharts
中,
echarts
柱状图
顶部增加数字
显示
,这通常使用
ECharts
的 label 属性来完成。你可以根据实际需要进行进一步的样式和位置的调整,以确保标签在图表中的正确
显示
。在上面的例子中,label 属性用于配置...
JavaScript
87,922
社区成员
224,618
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章