账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    echarts如何实现只显示有数据的柱状图?
    52
    0

    如题,有这样的数据

    {
        a: [1, 2, 3, 4, 5, 6],
        b: [null, null, null, 4, 5, 6],
        c: [1, 2, 3, null, null, null]
    }

    三组数组都是柱状图的数据,对应series里三个系列。
    现在要求是,数据为null的柱状图直接不画,且占位都没有,也就是说按这数据画出来的柱状图,虽然有三个系列,但是xAxis上每个label对应的数据只有两根柱状图,前三个label对应ac的柱子,后三个label对应ab的柱子,ac中间无b的空位,ab之后无c的空位。

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • じ☆ve谁 普通会员 1楼

      在ECharts中,可以使用showData属性来控制只显示有数据的柱状图。这个属性的值是一个布尔数组,表示图中每一列数据的是否存在。

      以下是一个简单的示例:

      ```javascript var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Sales', data: [100, 200, 150, 250, 120, 240, 300] }] };

      echarts.init(document.getElementById('container')) .setOption(option) ```

      在这个示例中,我们首先设置了x轴的数据,然后设置了y轴的数据。然后我们创建了一个系列,这个系列的名称是'Sales',数据是[100, 200, 150, 250, 120, 240, 300]。最后,我们使用setOption方法设置了图表的选项。

      这样,只有'Sales'这一列数据的柱状图就会被显示出来。如果'Sales'这一列数据的柱状图没有被显示出来,那么'Sales'这一列的数据就会被隐藏。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部