实现效果如图：

实现思路：在el-table-column中自定义模板template中 给div拼接生成唯一ID （id="'tiger-' + props.row.materialCode + props.$index" ）然后在myEcharts方法中用echart实现可视化图表；

1.自定义模板

<!--myEcharts图表渲染方法  动态绑定唯一ID  props.row.materialDeatils图表详情数据-->
<el-table-column label="价格曲线图" width="600" align="center" prop="" v-if="headers.minPrice">
        <template slot-scope="props">
            {{myEcharts(props.row.materialCode,props.$index,props.row.materialDeatils)}}
            <div :id="'tiger-' + props.row.materialCode + props.$index" style="width: 100%;min-height:200px;height: 100%; margin: -20px 0 -40px 0;"></div>
        </template>
</el-table-column>

2.echart使用

安装echarts
npm install echarts --save;

引入echarts

import echarts from 'echarts';

拿到templet中明细数据materialDeatils 也就是arguments[2],并在Echarts中渲染图表：

// 折线图
    myEcharts(){
      //获取每一个template中的materialDeatils明细数据
      let materialDeatils = arguments[2];
      let xd = [], yd = [];
      if(materialDeatils.length > 0){
        materialDeatils.forEach(item => {
          let time = item.buyDate;
          let subtime = "";
          if(time){
            subtime = time.substring(5,10);
          }
          xd.unshift(subtime);
          // yd.unshift(item.price * item.qty);// 总价
          yd.unshift(item.price);//单价
        })
      }
     var option = {};
     option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          //X轴值 文字颜色
          axisLabel:{
            show: true,
            textStyle:{
              color:'#008ACD',
              fontSize:'12'
            }
          },
          //x轴 刻度颜色
          axisLine:{
            lineStyle:{
              color:'#008ACD',
            }
          },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data:xd
        },
        yAxis: {
          type: 'value',
          //Y轴 刻度颜色
          axisLine:{
            lineStyle:{
              color:'#008ACD',
            }
          },
          //Y轴值 文字颜色
          axisLabel: {
            show: true,
            textStyle:{
              color:'#008ACD',
              fontSize:'12'
            },
            formatter: '{value}'
          }
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            // data: [10, 11, 13, 11, 12, 12, 9],
            data: yd,
            color:'#2EC7C9',
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };
     // 动态获取每列的id
     let domId = "tiger-" + arguments[0] + arguments[1];
     this.$nextTick(() => {
       let domtree = document.getElementById(domId);
       var myChart = echarts.init(domtree,'macarons');
       option && myChart.setOption(option);
       myChart.resize();
     })
    }