echarts移动端设备屏幕尺寸的适配

在项目过程中发现，屏幕宽度小于360px时，echarts图表的legend图例组件会发生重叠，是屏幕宽度不足导致的。

legend属性	属性值
left	图例组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
orient	图例列表的布局朝向。 可选：'horizontal'，'vertical'
itemGap	图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
itemStyle	图例的图形样式。

legend属性的echarts官方文档：Documentation - Apache ECharts

解决：

第一步先用js获取屏幕宽度：

document.documentElement.clientWidth

当屏幕宽度变换时，legend变换：

        let legend = {}
        if (document.documentElement.clientWidth < 360) {
          legend = {
            data: [jtime, qtime, pmTime, qpmTime],
            top: 0,
            left: 'center',
            orient: 'vertical',
            itemGap: 3,
            height: 12,
            itemWidth: 15,
            itemHeight: 10,
            textStyle: {
              fontSize: 10,
              lineHeight: 12
            }
          }
        } else {
          legend = {
            data: [jtime, qtime, pmTime, qpmTime],
              top: 0,
              right: 0,
              left: 'center',
              orient: 'vertical',
              height: 12,
              itemWidth: 20,
              itemHeight: 10,
              textStyle: {
                fontSize: 10,
                lineHeight: 12
              }
          }
        }

最后设置option内的legend：

legend: [ legend ]