携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
如图所示，左右两边是两个数组图表渲染，需要给唯一的ref和id，每次更新数据时需要调用对应的图表方法（本文中的图表是封装成第三方组件调用）
直接看代码： 子组件（封装后的echarts）
<template>
<div>
<div class="columnx_container">
<div
class="left_chart"
:id="id"
:class="className"
:chartData="chartData"
:style="{ height: height, width: width }"
/>
<div class="right_icon_delay" v-if="type == '延期'">
<p :style="{ fontSize: scalFontSize }">+{{ chartData.currentDelayDays }}</p>
<p>延期</p>
</div>
<div class="right_icon_ontime" v-if="type == '准点'">
<p :style="{ fontSize: scalFontSize }">-{{ chartData.currentDelayDays }}</p>
<p>准点</p>
</div>
</div>
<p class="legend_like">
<span></span>
合同评审
<span></span>
生产准备
<span></span>
生产制造
<span></span>
订单节点
</p>
<no-data v-if="noData" class="noDataCls"></no-data>
</div>
</template>
initChart(data) {
if (data.noData) {
this.noData = true
return
}
this.destoryChart()
this.noData = false
let { seriesData } = data
const num = seriesData.currentDelayDays.toString()
if (num.length > 4) {
this.scalFontSize = '14px'
} else {
this.scalFontSize = null
}
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption(
{
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
top: '20',
bottom: '20',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['实际交付周期', '计划交付周期']
},
series: [
{
name: '合同评审',
type: 'bar',
barWidth: 15, //柱状宽度
itemStyle: {
//柱状颜色和圆角
color: '#6B89E9',
barBorderRadius: [4] // （顺时针左上，右上，右下，左下）
},
stack: 'total',
data: seriesData.orderDataX.contractReview,
// 订单节点值与位置显示
markPoint: {
data: [{ value: 6, xAxis: seriesData.orderNodeT, yAxis: 0 }],
label: {
color: 'transparent' // 隐藏文字
},
symbol: 'image://' + require('../../assets/imgs/angle.png'),
symbolSize: [18, 18], // 调整图片的长宽
symbolOffset: [0, '60%'] // 调整标注图片的位移方向 大小
}
},
{
name: '生产准备',
type: 'bar',
barWidth: 15,
itemStyle: {
color: '#FCBF63',
barBorderRadius: [4]
},
stack: 'total',
data: seriesData.orderDataX.productionPreparation
},
{
name: '生产制造',
type: 'bar',
barWidth: 15,
itemStyle: {
color: '#3ED473',
barBorderRadius: [4]
},
stack: 'total',
data: seriesData.orderDataX.manufacturing
}
]
},
true
)
}
父组件：
html中循环：
<div class="ontime_order">
<div
v-for="(item, index) in ontimeOrderList"
:key="index"
@click="goOrderDetail(item, '准点')"
style="cursor: pointer">
<div class="condition_sch">
<div class="condition_sch_left">{{ item.contractNum }}交付预测周期分析</div>
<div class="condition_sch_right export_icon">
<el-button
:disabled="disSave2"
class="resetBtn btn"
plain
@click.stop="saveColumnXImg(item.chartId, `${item.contractNum}交付预测周期分析`)"
>
<svg-icon class="icon" icon-class="export" />
</el-button>
</div>
</div>
<div>
<column-x
:ref="item.contractNum"
type="准点"
:id="item.chartId"
:chartData="item"
width="100%"
></column-x>
</div>
</div>
</div>
获取到数据后，触发对应图表方法（注意refs的写法）
console.log('准时列表', this.ontimeOrderList)
this.$nextTick(() => {
this.ontimeOrderList.forEach(item => {
this.$refs[item.contractNum][0].initChart({
seriesData: item,
noData: !item
})
})
})
