开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天
因项目需求，在一个页面上需要多个图表，封装Echarts并自适应
以下文件是根据自己项目创建，只需看到父子组件的对应关系即可
- 创建父组件PartyBuildingWorkData.vue，承载不同图表的父组件，可通过该组件进行年份或者月份的传递，把年份或者月份传递给不同的图表（子组件），子组件通过props接收到父组件传递的值，再通过watch监听值的变化，调用接口渲染不同年份或月份的实际数据。
- 同级创建一个modulesView文件件存放子组件（也就是图表组件），以及封装的实例化echarts组件
- modulesView文件夹下创建一个echartsInit文件夹，echartsInit文件夹里创建echartsInit.vue
- modulesView文件夹下创建图表组件ActivitiesMonthMeetingZb.vue、ActivitiesQuarterMeeting.vue，例如：一个组件是环形图，一个组件是柱状图
// echartsInit.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>
