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

先上效果图，如下：

要点：

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

   grid: {
       left: '100px',
       right: '50px',
       bottom: 0
   }

3. 整个表格的宽度为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);}

4. table随着浏览器窗口的收缩能够自适应，echart需要给图标添加监控事件来达到自适应。

   window.addEventListener("resize", function () {
       myChart.resize();
   });

5. 为了保证浏览器窗口收缩的时候，table与echart图表对齐，echart图表左右的距离必须用px不能用%，这是对齐的关键。

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