之前遇到过这2种情况，
1.在数据项的值是0时，柱状图虽然不会显示，但是还是会占一个位子。
2.如果数据项的种类不一样的话，也会导致有空位。比如：2012年有分类1、2、3，但是2013年却有分类1、3、4。这种情况也会导致有空位子的出现。
这个时候，用echarts自带的 bar 是不太好用的。
可以用echarts的自定义柱状图来优化一下，做到隐藏为0的数据，以及数据项种类不一致时隐藏空白位置。
就像下面的效果图。
话不多说，直接上代码。
自定义渐变色以后
源代码在网盘，两个demo，个人觉得echart_custom.vue比较好，
链接：https://pan.baidu.com/s/1QRN753EicgpmROQFoaTYZA
提取码：wpda
链接：https://pan.baidu.com/s/1lrS1GUjAJPvrD0kErNevdg
提取码：3g0p
补充：1，竖着显示柱状图上的文字
2.自定义悬浮框的显示内容
显示效果如下：
之前遇到过这2种情况， 1.在数据项的值是0时，柱状图虽然不会显示，但是还是会占一个位子。 2.如果数据项的种类不...
最近根据业务需求展示数据柱状图，于是选择使用echarts 自定义custom柱状图，研究了两天终于完成。效果图如...
给柱状图添加loading效果 echarts 柱状图默认效果： 修改默认加载效果： 修改后的效果图如下： 隐藏加...
main.js需引入echarts，main.js 代码： echarts.vue代码： 其它页面如需此柱状图可引入：
Echarts-柱状图 步骤1 ECharts 最基本的代码结构 步骤2 准备x轴的数据 步骤3 准备 y 轴的数...
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据，下面是使用Echarts柱状图来展示对应...
如何在获取新的数据前清空echarts折线图、柱状图中所有的折线和柱子？ 在echarts的操作实际运用中...
前话：以前用echarts开发项目的时候根本就没有遇到过这种问题。 用echarts画柱状图，在拿到后台传递的数据...
柱状图获取后台数据展示： 饼图获取后台数据展示： 前端实现方法： var myChart = echarts.in...
以echarts的柱状图作为示例，图例可以设置点击，控制对应的柱子显示隐藏，那么问题来了，如果所有的柱子都可以点击...
本文标题：echarts 自定义柱状图 可隐藏为0的数据
本文链接：https://www.haomeiwen.com/subject/qygmaktx.html
网友评论