前段时间接了一个可视化的页面，里面有个模块是涉及到在每个X轴的区间有多个柱状图的需求
第一种方案
笔者第一次看了设计稿，感觉难度不是很大(结果踩了个坑) 所以特意写出来记录一下。
这个是第一次做出来的图，发现跟需求图相差太大（当时的模拟数据没有写那么多，所以没有完全看出数据满格的样式问题）
需求要的图是在X轴的区间中，数据稳定的时候，能将X轴的区间充满，而这个做法的话并不能充满，柱子也太过于细小，不方便观看（用于大屏）
以下的图为 第一次模拟数据看到的效果（当时还觉得这个模块简简单单）,那时候以为这种应该就能满足了，没有考虑到数据多的时候，Echarts 自适应导致的问题。
这种方案，虽然也能满足数据在间内，但是展示的效果太差了。所以笔者重新构想了第二套方案。
第二种方案
前几天看了echarts的属性文档，翻来翻去也没有找到解决第一种方案，每个X轴区间间隔的问题。所以我换了这个新的方案。（笔者在官网找啊找，找到一个类似的图像，然后突然有了想法）
第一种做法是把每一个区间看成了一个块，通过X轴名称去绑定，这样子理论上是行得通的，但是样式太难看了。新想法是将每一个刻度看成一个对象。经过模拟数据，发现可以达到UI图的样子（也不会因为自适应而导致柱子太细），所以采用了这种方案。
例子是在vue 3.0版本下 开发的。
所以额外补充下在vue 3.0版本下如何使用echarts
- npm install echarts --save
- 然后在main.js文件中引入依赖，有按需引入的方式，这里例子使用了全局引入的方式。
import * as echarts from 'echarts'- vue3.0 挂载新属性的方式也发生了改变
app.config.globalProperties.echarts = echarts- 然后在需要的页面使用即可
数据也是固定的(上限96，这里模拟直接用96个数据)，8个区间里面12个刻度。 思路就是：分成8个数组，每个数组存储8个区间的值。 然后12个刻度的每一个值去拿8个区间里面每一个下标的值。
然后用以下代码生成柱状图, 生成完的barList 丢到echarts里面的series即可。
for(let i = 0; i < 12; i++) {
let item = dataList[i]
if(item) {
barList.push({
type:'bar',
data: item
})
}
}`
效果图：
这种方式成功还原了设计稿，也在数据满格的情况下，柱子不会变得非常细小。
谢谢大家。
