美文网首页
ecahrts图表最小高度数据差距过大

ecahrts图表最小高度数据差距过大

作者: litielongxx | 来源:发表于2022-07-08 17:17 被阅读0次

echarts柱状图,最小数据过大会导致蓝色部分原本最小会直接没有。
几十和上万同时存在 ,一般可以用type:'log‘(替换原有type:'value')变成10-5000-10000-20000这种阶梯式。
缺点是,柱状图之间的关系比例会不明显。
也可以用barMinHeight设置最小数据时的高度,且修正下为0不展示最小高度。
实际设置为透明色。


image.png
//data [1,2,0,4] 变成展开的[1,2,{...},4]
...
data.forEach((ele,i)=>(){
if (ele == 0) {
          arr.splice(n, 1, {
                  value: 0,
                  itemStyle: { opacity: ele.d ? 1 : 0 }
       })
  }
})

option:{
  series:[
   {
                        type: 'bar',
                        barWidth: 12,
                        barMinHeight: 5,
    },
...
     {
                        type: 'line',
                        barWidth: 12,
                        barMinHeight: 5,
        },
]
}

ps:https://blog.csdn.net/qq_41137858/article/details/119327240

相关文章

  • ecahrts图表最小高度数据差距过大

    echarts柱状图,最小数据过大会导致蓝色部分原本最小会直接没有。几十和上万同时存在 ,一般可以用type:'l...

  • echarts入门

    在vue使用echarts echarts是什么 ecahrts 是一个高度可定制化的图表库 如何使用echart...

  • ecahrts双图表南丁格尔玫瑰加饼图

    ecahrts可以双图表,写在series中。在线地址https://echarts.apache.org/exa...

  • ecahrts常用图表配置选项

    常用ecahrts图表配置: 1环形图/饼图 1.1环状图 1.2 南丁格尔玫瑰 1.3南丁格尔玫瑰2 2 柱状图...

  • 【百日更】57/100 要学会阅读数字

    怎么去阅读数据呢? 我以前的理解是通过大量的原始数据去做图表,然后在图表里面找趋势。柱状图就是量价关系,折线图就是...

  • 暂存代码

    Flutter 获取图片像素数据(rgba) quick app flex basis 测试 & 根节点最小高度不...

  • 小程序echarts-雷达图拐点空心圆

    小程序ecahrts雷达图常见参数。 需自行下载ecahrts对应的小程序版本,详见参考资料。 1 html 动态...

  • 差距

    人与人最小的差距是智商,最大的差距是坚持。

  • R语言 箱线图

    箱线图是数据集中的数据分布良好的度量。 它将数据集分成三个四分位数。 此图表表示数据集中的最小值,最大值,中值,第...

  • ECharts数据可视化(3)——echarts+php+mys

    最近在学习数据可视化,用ecahrts的实例demo修改数据不具有普适性,所以想着通过ajax调用mysql的后台...

网友评论

      本文标题:ecahrts图表最小高度数据差距过大

      本文链接:https://www.haomeiwen.com/subject/jxyvbrtx.html