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

Igiveufireworks

已于 2022-09-01 17:28:54 修改

阅读量1.7k

点赞数 2

于 2022-09-01 17:04:38 首次发布

本文链接：https://blog.csdn.net/igiveufireworks/article/details/126646855

版权

在项目过程中发现，屏幕宽度小于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：