js+echarts画图：代码没报错，但是图表不显示

背景

• 想用 js+echarts 画图，图表布局大致如下：
  父盒子下面有2个盒子并排分布，其中左边盒子是数字模块，右边盒子是图表模块：
  

• 核心代码：
  css文件：
  

html文件：

但是运行完html页面后，代码没有报错，图表却没有显示出来：

解决

• 按住F12键，进入控制台：
  

• 结合样式和元素进行错误排查：
  

• 发现没有显示出来的子盒子box2尺寸不符合原先设定的：
  原先设定的是150500大小，显示出来的是500502大小
  

• 于是进去css文件和html文件查看子盒子box2对应的代码，发现：

在定义box2盒子时，用的是元素的id属性

而对box2进行样式设计的时候，用的是类选择器：

• 这样前后不一致，导致了虽然代码没有报错但是图表不显示，所以在定义box2盒子的html代码那里，添加box2的类属性值：
  

• 于是图表就显示出来了：