Echarts项目中屏幕分辨率适配

适配问题用rem单位，其实也是对屏幕进行切分，按照份数，对应成单位，今天弄了一个小demo，先写一个初始化函数initChart（）初始化一个图表，配置上基本属性，然后再写一个屏幕适配函数screenAdapter（），在vue挂载阶段，依次初始化-监听-适配，来保证组件内图表的适配。

<script>
export default {
  data () {
    return {
      chartInstance: null, // echarts的实例对象
      allData: []
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.construct_ref, 'chalk')
      const option = {
       。。。。。
      }
      this.chartInstance.setOption(option)
    },
    screenAdapter () {
      const titleFontSize = this.$refs.construct_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize / 1.2
          }
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize / 1.4
            }
          }
        }
       。。。。。
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}
</script>

三个注意点：

1.挂载阶段，一定要在监听页面改变后，再调用适配函数，不然第一次进入，还没改变页面尺寸的时候，样式不对。

2.适配函数中，在对图表setOption后，需要对chartInstance对象，再resize一下，不然页面没有反应。

3.initChart的时候，主要配置一些位置，图形等等，通用的设置，screenAdapter的时候，就要把所有尺寸相关的，用自己const的一份，来进行放大缩小的设置数据，比如字体大小，宽度高度等等，我用的是titleFontSize来当做一份，类似于单位

const titleFontSize = this.$refs.construct_ref.offsetWidth / 100 * 3.6

记录一下，菜鸡之路。

效果是下面这样：