vue中el-table表格和echarts饼状图两者结合，实现数据的渲染

<template>
  <div class="all" display:flex;align-items:center;>
    <h4>问题来源</h4>
    <el-table :data="projectNum" style="width:300px" class="jk-table">
      <el-table-column prop="prjDivisionalName" label="位置" width="180px"></el-table-column>
       <el-table-column prop="queryCount" label="数量" width="180px"></el-table-column>
    </el-table>
     <div id="right" style="height: 500px"></div>
  </div>
</template>
<script>
import { prjInfo, userInfo } from "@/mixins/index";
import { getQuesNumOfPrjDivisional } from "@/services/index";
import { CHART_COLORS } from "@/commons";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
export default{
  data(){
    return{
      projectOption:{},//饼状图数据
      projectNum:[]
    }
  },
  mounted(){
    this.getProject()
  },
  methods:{
    //获取右边的列表和饼状图的数据
   getProject() {
      const param = {
        prjID: this.prjId
      };
      getQuesNumOfPrjDivisional(param).then(({ data }) => {
        // 右上角的饼图
        this.myChartRight = echarts.init(document.getElementById("right"));
        this.projectOption = {
          color: CHART_COLORS,
          title: {
            text: "位置分布",
            top: "50",
            left: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            bottom: "10",
            left: "center",
            data: data.map(item => item.prjDivisionalName)
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: data.map(item => {
                return { name: item.prjDivisionalName, value: item.queryCount };
              }),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        //假数据的渲染
        this.myChartRight.setOption(this.projectOption);
        //表格的渲染
        this.projectNum = data;
        // console.log(data, 222);
        //表格的数据和饼状图的数据一一对应
        this.projectOption.series[0].data[0].name = data[0].prjDivisionalName;
        this.projectOption.series[0].data[1].value = parseInt(
          data[1].queryCount
        );
        this.myChartRight.setOption(this.projectOption);
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.all {
  overflow: auto;
  height: 100%;
  background-color: #fff;
}
  </style>

效果图如下所示：