【ECharts】根据屏幕尺寸echart字体自适应（rem）

一、问题

        pc端使用echart，屏幕变大或变小时，echart的字体大小没有根据屏幕大小变化

二、解决方案

        方法

const = fontSizeRem(size)=> {
  const clientWidth = window.innerWidth || document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;//尺寸大小
  return size* fontSize;
}复制

 tips：

• 使用后还需要监听浏览器窗口大小，改变时进行重绘，可查看文章http://t.csdn.cn/YNFQ8

        图表样式

 {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    // toolbox: {
    //     show: true,
    //     top: '50px',
    //     right: '10px',
    //     feature: {
    //         mark: { show: true },
    //         dataView: { show: true, readOnly: false },
    //         // magicType: { show: true, type: ['line', 'bar'] },
    //         // restore: { show: true },
    //         saveAsImage: { show: true },
    //     }
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '4%',
      containLabel: true
    },
    legend: {
      type: 'plain',
      orient: 'horizontal',
      left: '20px',
      top: '0px',
      data: ['已随访', '未随访', '超期随访'],
      textStyle: {
        color: '#a1a1a1',
        fontSize: fontSizeRem(14)
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLabel: {
        interval: 0,
        padding: [0, 10, 0, 0],
        fontSize: fontSizeRem(14)
      },
      offset: 15,
      axisTick: {
        show: false
      },
      axisLine: {
        symbol: ['none', 'none'],
        show: false,
        onZero: true
      }
    },
    yAxis: {
      type: 'value',
      splitLine: { show: false },
      axisLabel: {
        margin: 20,
        fontSize: fontSizeRem(14)
      }
    },
    series: [
      {
        name: '已随访',
        // type: "bar",
        animation: false,
        areaStyle: {
          color: {
            global: false,
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(40, 158, 143, 0.50)'
              },
              {
                offset: 1,
                color: 'rgba(40, 158, 143, 0.00)'
              }
            ]
          }
        },
        itemStyle: {
          // 设置线条上点的颜色（和图例的颜色）
          color: '#289e8f'
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#289e8f', // 颜色
            borderColor: '#289e8f', // 图形的描边颜色
            borderWidth: 1 // 描边的线宽
          }
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        type: 'line',
        // stack: 'Total',
        symbolSize: 10,
        symbol: 'circle',
        lineStyle: {
          color: '#289e8f'
        },
        smooth: true,
        data: []
      },
      {
        name: '未随访',
        animation: false,
        lineStyle: {
          color: '#FC7338'
        },
        itemStyle: {
          // 设置线条上点的颜色（和图例的颜色）
          color: '#FC7338'
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#FC7338', // 颜色
            borderColor: '#FC7338', // 图形的描边颜色
            borderWidth: 1 // 描边的线宽
          }
        },
        areaStyle: {
          color: {
            global: false,
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(252, 115, 56, 0.50)'
              },
              {
                offset: 1,
                color: 'rgba(252, 115, 56, 0.00)'
              }
            ]
          }
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        type: 'line',
        // stack: 'Total',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        data: []
      },
      {
        name: '超期随访',
        // type: "bar",
        animation: false,
        lineStyle: {
          color: '#1771F5'
        },
        itemStyle: {
          // 设置线条上点的颜色（和图例的颜色）
          color: '#1771F5'
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#1771F5', // 颜色
            borderColor: '#1771F5', // 图形的描边颜色
            borderWidth: 1 // 描边的线宽
          }
        },
        areaStyle: {
          color: {
            global: false,
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(23, 113, 245, 0.50)'
              },
              {
                offset: 1,
                color: 'rgba(23, 113, 245, 0.00)'
              }
            ]
          }
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        type: 'line',
        // stack: 'Total',
        smooth: true,
        symbolSize: 10,
        symbol: 'circle',
        data: []
      }
    ]
  };复制