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

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

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 ]