echart柱状图拼接table，每列对齐，并自适应的问题

先上效果图，如下：

要点：

echart的div和table的div宽度都是98%，左边的margin为2%。
echart柱状图设置左右的距离是100px和50px，左边的100px是留给表格第一列的。echart 3设置grid的left和right为100px和50px，因为要拼接，bottom设置为0。
```
grid: {
    left: '100px',
    right: '50px',
    bottom: 0
}
```

整个表格的宽度为calc(98%-50px)，第一列的宽度为98px，剩余12列每列的宽度为calc((100%-98px)/12)，为了保证每格等间距，需要给表格设置table-layout: fixed;样式。

.echart-table{color: #fff; width: 100%; border:0; border-collapse:collapse; table-layout: fixed;}
.echart-table > thead > tr > th{text-align: center; border: 1px solid #017081;}
.echart-table > thead > tr > th:first-child{border: none; width: 98px;}
.echart-table > thead > tr > th:not(first-child){width:calc((100% - 98px) / 12);}
.echart-table > tbody > tr > td{text-align: center; border: 1px solid #017081;}
.echart-table > tbody > tr > td:first-child{width: 98px;}
.echart-table > tbody > tr > td:not(first-child){width:calc((100% - 98px) / 12);}

table随着浏览器窗口的收缩能够自适应，echart需要给图标添加监控事件来达到自适应。
```
window.addEventListener("resize", function () {
    myChart.resize();
});
```
为了保证浏览器窗口收缩的时候，table与echart图表对齐，echart图表左右的距离必须用px不能用%，这是对齐的关键。

如需完整代码可以到我的下载中下载。

echart柱状图拼接table，每列对齐，并自适应的问题

相关推荐