vue中实现（el-table）表格中，【echarts柱状图】的封装和调用

 1、创建 BarEcharts.vue 组件

<template>
    <div>
        <div id="bar"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    props: {
        markList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            NumArr: [],
            CodeArr: []
        }
    },
    created() {
        this.$nextTick(() => {
            this.barBtn()
        })
        this.getMarkList()
    },
    methods: {
        getMarkList() {
            let a = ''
            let b = ''
            this.markList.forEach(mark => {
               a += mark.FactorDivide + ','
               b += mark.FactorCode + ','
            })
            this.NumArr = a.substring(0, a.length - 1).split(',').reverse().map(Number)
            this.CodeArr = b.substring(0, b.length - 1).split(',').reverse()
        },
        barBtn() {
            let myChart = echarts.init(document.getElementById('bar'))
            let option = {
                legend: {
                    show: false
                },
                grid: {
                    top: '0',
                    left: '0%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    min: 0,
                    max: 5,
                    boundaryGap: [0, 0.01],
                    // 表格里面Y轴线条
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        // y轴刻度线
                        show: false
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.CodeArr,
                    // 表格里面Y轴线条
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        // y轴刻度线
                        show: false
                    }
                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        barWidth: 10, // 柱图宽度
                        markLine: {
                            itemStyle: {
                                color: 'red'
                            },
                            label: {
                                formatter: '阳性线',
                                itemStyle: {
                                    color: '#053d6f'
                                }
                            },
                            data: [
                                [
                                    {
                                        name: '两点之间的线',
                                        coord: [3, 0]
                                    },
                                    {
                                        name: '两点之间的线',
                                        coord: [3, 9]
                                    }
                                ]
                            ]
                        },
                        itemStyle: {
                             color: '#053d6f'
                        },
                        label: {
                            show: true,
                            position: 'right'
                        },
                        data: this.NumArr
                    }
                ]
            }
            myChart.setOption(option)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
#bar{
    width: 100mm;
    height: 110mm;
    margin: 0 auto;
}
</style>

2、在页面中调用

<template>
 <div class="detail_tables">
   <el-table :data="markList" border :span-method="objectSpanMethod">
        <el-table-column label="因子/指标名称" width="135">
            <template slot-scope="scope">
                {{scope.row.FactorCode}} {{scope.row.FactorName}}
            </template>
        </el-table-column>
        <el-table-column prop="FactorDivide" label="指标分数" width="82" align="center"></el-table-column>
        <el-table-column label="指标图" align="center">
            <template slot-scope="scope">
                <!-- 指标图 -->
                <BarEcharts :markList="markList"></BarEcharts>
            </template>
        </el-table-column>
        <el-table-column prop="DegreeLevel" label="程度" width="85" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import BarEcharts '@/components/BarEcharts'
export default {
  components: {BarEcharts},
  data() {
    return {
      markList:[
       {FactorCode: 'F1', FactorName: '躯体化', FactorDivide: 2, DegreeLevel: '基本健康'},
       {FactorCode: 'F2', FactorName: '强迫', FactorDivide: 1.3, DegreeLevel: '需要改善'},
       {FactorCode: 'F3', FactorName: '人际关系敏感', FactorDivide: 2.5, DegreeLevel: '基本健康'},
       {FactorCode: 'F4', FactorName: '抑郁', FactorDivide: 0.7, DegreeLevel: '需要改善'},
       {FactorCode: 'F5', FactorName: '焦虑', FactorDivide: 1.8, DegreeLevel: '需要关注'},
       {FactorCode: 'F6', FactorName: '敌对', FactorDivide: 1.5, DegreeLevel: '需要关注'},
       {FactorCode: 'F7', FactorName: '恐怖', FactorDivide: 2.1, DegreeLevel: '需要关注'},
       {FactorCode: 'F8', FactorName: '偏执', FactorDivide: 1.6, DegreeLevel: '需要改善'},
       {FactorCode: 'F9', FactorName: '急性症状', FactorDivide: 0.8, DegreeLevel: '需要关注'},
       {FactorCode: 'F10', FactorName: '睡眠及饮食', FactorDivide: 1, DegreeLevel: '需要改善'}
       ]
     }
  },
  methods: {
    // 合并第3列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 2) {
         if (rowIndex === 0) {
            return { // 合并第三列（columnIndex === 2），从第1行开始往下10行
              rowspan: 10,
              colspan: 1
            }
         } else {
            return {
               rowspan: 0,
               colspan: 0
            }
         }
       }
     }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .detail_tables{
  display: flex;
  flex-wrap: wrap;
  margin: 10mm 0 20mm 0;
  .el-table{
     margin: 1.5mm;
  }
  .el-table__cell{
     font-size: 4mm;
     line-height: inherit;
     padding: 2mm 0px;
  }
  .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
     border-color: #333;
  }
}
</style>

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~