charts内字体大小适配问题（适配不同浏览器）

charts内字体大小适配问题（适配不同浏览器）

<template>
	<div class="home">
  	<-- 通过父传子传值方式-->
      <div class="title-wrap">
   		  <top-title></top-title>
      </div>
	  <div class="today-table-wrap echart-wrap 父组件">
          <echartTodayOrder :fontSize="fontSize"></echartTodayOrder>
      </div>
      <div class="pk-table-wrap echart-wrap">
     	  <echartTotalIncreMent :fontSize="fontSize"></echartTotalIncreMent>
      </div>
      <div class="year-goal-wrap echart-wrap">
     	  <echartGoalAndEffect :fontSize="fontSize"></echartGoalAndEffect>
      </div>
      <div class="refund-wrap echart-wrap">       
		  <echartRefund :fontSize="fontSize"></echartRefund>
 	  </div>
      <div class="month-effect-wrap echart-wrap">
     	  <echartHalfIncrement :fontSize="fontSize"></echartHalfIncrement>
	  </div>
   </div>
</template>

<script>
export default {
	components: {
     1,
     2,
     ...
 }，
 data() {
     return {
         screenWidth: 960   //默认最小屏幕宽度（飞视浏览器）
     }
 }，
 computed: {
     // echarts
     fontSize() {
         if (this.screenWidth <= 960) {
            return 8 
         } else if (this.screenWidth > 1440) {
            return 14
         } else {
            return 12
         }
     }
 },
}
</script>

// 绘制图表
this.myChart.setOption({
 ......
})// 子组件中接收 (以echartGoalAndEffect子组件为例)
<template>
	<div class="echart-goal-effect" id="echartGoalAndEffect"></div>    
</template>

<script>
export default {
	// 父传子 在子组件内部通过props属性接收，
	props: {
     fontSize: {
         type: Number,  // 限制父组件传递过来值的类型
         default: 12    // 假设父组件未传，这里设置一个默认值
     }
 }，
 data() {
     return {
         legendData: [],
         seriesArr: [],
         myChart: null
     }
 },
 methods: {
     getGoalAndEffect() {
         SearchGoalAndEffect().then(res => {
             let legendData = []
             let seriesArr = []
             res.year_detail.forEach(item => {
                 legendData.push(item.department_name)
                 seriesArr.push({
                     name: item.department_name,
                     type:'line',
                     data: [(item.January / 10000).toFixed(2),(item.February / 10000).toFixed(2),...],
                     ...,
                     markLine: {
                     	symbol: 'none',
                     	silent: true,
                     	label: {
                     		formatter:(item.target_total / 10000).toFixed(2) + "(距离完成目标还有" + ...,
                     		fontSize: this.fontSize
                         }
                     }
                 })
             })
             this.legendData = legendData
     		this.seriesArr = seriesArr
     		this.$nextTick(() => {
                 this.initChart()
             })
         })
     },
     initChart() {
         let myChart = thisletmyChartthis.$echarts.init(document.getElementById('echartGoalAndEffect'))
         this.myChart = myChart
         // 绘制图表
         this.myChart.setOption({
             ......
         })
     }
 },
 created() {
 	（方法的调用）            
 },
 mounted() {
     window.onrise = () => {
         this.myChart.resize()
     }
 },
 beforeDestory() {
     （清除定时器）
 }
}
</script>

<style lang="less" scoped>
@import './index.less'
</style>