如何用React CSS绘制一个长尾词的竖状柱状图？

本文共计1063个文字，预计阅读时间需要5分钟。

前言：页面结构分为两部分，柱状图为一部分，文字为一部分，标注为另一部分。首先来看柱状图，文字部分随后展示。宽度设置为width: 55%，高度使用百分比进行动态变化。整个部分使用flex布局。

前言：

页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。

先来看柱状图 + 文字这一部分。

宽度定为width: 55,height高度使用百分比进行动态变化。整个部分使用flex布局。通过justify-content: space-around;属性，对里面的项目进行排列。项目 item 同样使用 flex 布局，这个是对 柱状图 + 文字 进行整体的排列。