vue项目-Echarts组件封装，基于一个echarts实例封装多个图表，echarts自适应

项目需求，在一个页面上需要多个图表，封装Echarts，并自适应

1.文件夹largeScreenView是src/views里的文件夹，专门放置大屏数据的vue组件
2.PartyBuildingWorkData.vue是父组件，承载不同图表的父组件，可通过该组件进行年份或者月份的传递，把年份或者月份传递给不同的图表（子组件），子组件通过props接收到父组件传递的值，再通过watch监听值的变化，调用接口渲染不同年份或月份的实际数据。
3.文件夹echartsInit是实例化echarts的组件echartsInit.vue
4.ActivitiesMonthMeetingZb.vue、ActivitiesQuarterMeeting.vue都是图表组件，例如：一个组件是环形图，一个组件是柱状图

// 直接复制 该组件是实例化echarts 所有图表都基于该组件
<template>
  <div class="chart-comp">
    <div :id="idName" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    idName: {
      type: String,
      default: ''
    },
    option: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      optionData: {},
      myChart: null
    }
  },
  watch: {
    option: {
      handler (val) {
        this.optionData = val
        this.initData()
        // this.option.xAxis[0].data = val.dataName
        // this.option.series[0].data = val.dataValue
        // var myChart = echarts.init(document.getElementById('mains'))
        // // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(this.option)
      }
    }
  },
  mounted () {
      this.initData()
  },
  methods: {
    initData () {
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.idName))
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.optionData)
        // 图表自适应
        window.addEventListener('resize', () => {
          myChart.resize()
        })
        this.myChart = myChart
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chart-comp {
  height: 100%;
  width: 100%;
}
</style>

// 图表组件  该组件 ActivitiesMonthMeetingZb.vue是一个环形图。
// 图表组件只展示一个，其他图表跟该组件类似，需要什么图 在echarts中进行配置即可，ActivitiesQuarterMeeting.vue组件是另一个柱状图，跟该组件类似。
<template>
  <div class="charts-workChartAllNum-wrapper">
    <!-- 工作推进 接收文件通知总数 -->
    <echarts-init idName="workChartAllNum" :option="option1" ref="activit"></echarts-init>
  </div>
</template>
<script>
// 引入实例化echarts组件 重点是要引入初始化echarts组件
import echartsInit from './echartsInit/echartsInit'
import { getSendZBJsDocCount } from '@/api/api-vue'  // 我的接口路径，换成你实际的接口
import { getAction } from '@/api/manage' // 接口请求方式 get
export default {
  name: 'WorkChartAllNum',
  components: {
    echartsInit
  },
  props: {
  // 接收父组件传递过来的年份，通过不同年份 调用接口渲染不同的数据
    btnSearchYear: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      option1: {}
    }
  },
  mounted () {
    this.initActivity()
  },
  watch: {
  	// 监听父组件传递过来的值，调用接口，渲染不同数据
    btnSearchYear: {
      handler (val, oldVal) {
        this.btnSearchYear = val
        this.$nextTick(() => {
          this.initActivity()
        })
      }
    }
  },
  methods: {
    initActivity () {
      getAction(getSendZBJsDocCount, {
        searchYear: this.btnSearchYear
      }).then(res => {
        if (res.success) {
          this.option1 = {
            tooltip: {
              trigger: 'item'
            },
            color: ['#749BFF', '#FF7475'],
            series: [
              {
                name: '接收文件通知总数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                data: res.result // 接口返回的实际数据
              },
              // 第二个圆显示百分比
              {
                name: '接收文件通知总数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                labelLine: {
                  lineStyle: {
                    // color: '#7D7D99'
                  },
                  smooth: 0.1,
                  length: 10,
                  length2: 50
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'inner',
                      formatter: '{d}%'
                    },
                    labelLine: {
                      show: false // 显示饼状图上的文本时，指示线不显示，在第一个data时显示指示线
                    }
                  }
                },
                data: res.result
              }
            ]
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.charts-workChartAllNum-wrapper{
  width:100%;
  height:100%;
}
</style>

// 父组件中画好页面布局，把图表组件引入进来就可以
// 我们是通过下拉菜单 选中不同年份 获取不同数据
<template>
	<div class="work_data_wrapper">
		<div>
			// 下拉菜单 选中不同年份 仅作为参考，具体看需求
			<a-select placeholder="选择" :value="searchYear" style="width: 200px" @change="handleChange">
	            <a-select-option v-for="(item) in selectVal" :key="item.itemCode" :value="item.itemName" :text="item.itemCode">
	              {{ item.itemName }}
	            </a-select-option>
          </a-select>
          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
		</div>
		<div class="charts_detail">
			// 这是柱状图组件  引入组件 自定义传值
            <ActivitiesQuarterMeeting :btnSearchYear="btnSearchYear"/>
        </div>
        <div class="charts_detail">
        	// 环形图组件 引入组件 自定义传值
            <ActivitiesMonthMeetingZb :btnSearchYear="btnSearchYear"/>
        </div>
	</div>
</template>
<script>
import ActivitiesQuarterMeeting from './organmodulesView/ActivitiesQuarterMeeting' // 柱状图组件 换成自己的路径
import ActivitiesMonthMeetingZb from './organmodulesView/ActivitiesMonthMeetingZb '// 环形图组件 换成自己的路径
export default {
	components : {
		ActivitiesMonthMeetingZb,
		ActivitiesQuarterMeeting
	},
	data(){
		return {
			 btnSearchYear: '2021',// 默认2021年 
			 searchYear: '2021',
		     selectVal: [
		        {
		          itemCode: 0,
		          itemName: '2021'
		        },
		        {
		          itemCode: 1,
		          itemName: '2020'
		        }
		      ]
		}
	},
	methods: {
		// 选中不通年份 
		handleChange (value) {
	      console.log(`selected ${value}`)
	      this.searchYear = value
	    },
	    // 点击查询 把选中的年份赋值给btnSearchYear 通过组件自定义传值给子组件
	    searchQuery () {
	      this.btnSearchYear = this.searchYear
	      console.log(this.btnSearchYear)
	    },
	}
</script>