使用 ucharts 的柱状图时,尤其是横向柱状图会更常见,会有自定义 y 轴数据的情况,就像使用过滤器时对数据进行格式化以达到自己想要的效果一样;
比如我想要这样的效果:
在这里插入图片描述
官网里的栗子如图所示:
在这里插入图片描述

但是如果此时我的数据比较长,这样放上去就会非常不美观,此时就需要对数据进行格式化,在 src\components\u-charts\config-ucharts.js 路径下的文件里:
在这里插入图片描述

然后再在统计图组件的代码部分,使用这个配置:

yAxis: {
   data: [
     {
       format: "yAxisDemo2",
     }
   ],
},

效果:
在这里插入图片描述
尤其是需要在纵轴展示公司名称时,可以展示部分统一样式,在点击想要查看某一项的时候仍然显示全称。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐