社区
JavaScript
帖子详情
ECharts 没有数据时柱状图不显示
Jas_wen
2017-05-19 02:47:08
...全文
3218
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
柱状图
如何不顶格_
echarts
柱状图
没有
数据
时
怎么隐藏柱子?
本文介绍了如何在
Echarts
中实现
柱状图
不顶格
显示
,以及当
柱状图
没有
数据
时
如何隐藏柱子。通过提供具体的Vue组件代码示例,展示了设置itemStyle和自定义渲染函数来调整
柱状图
的
显示
效果。
echarts
柱状图
在顶端
显示
数值,并且数值为0
时
不展示。
本文介绍了如何在
echarts
柱状图
中实现在柱子顶端
显示
数值,以及如何设置当数值为0
时
不展示。通过使用formatter函数进行条件判断,实现了数值为0
时
返回空字符串,从而隐藏
显示
。同
时
,对于非0数值,可以添加单位进行展示。
echart堆叠
柱状图
tooltip不
显示
value为0的情况,自定义formatter
博客主要讲述了
ECharts
堆叠
柱状图
中,tooltip不
显示
value为0的情况,通过自定义formatter来解决该问题,涉及前端开发中可视化图表的处理。
echarts
柱状图
值为0
时
不
显示
以及
柱状图
百分比展示
文章展示了如何使用
Echarts
在
柱状图
中处理值为0的情况,使其不
显示
,并且详细说明了如何展示
柱状图
的百分比。通过配置xAxis,yAxis和series的
数据
以及tooltip的formatter函数,实现了数值为0
时
不渲染和
显示
数据
的百分比形式。代码示例中包含了
数据
处理和
Echarts
配置的详细步骤。
echarts
中如何在
柱状图
上方
显示
文字
本文详细介绍了如何使用
ECharts
在
柱状图
的每个柱子上方
显示
具体数值,通过设置itemStyle.normal.label参数实现,展示了完整的代码示例,包括设置柱子宽度、颜色渐变等。
JavaScript
87,990
社区成员
224,684
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章