IVIEW组件Table中加入EChart柱状图

展示图如下：

主要利用了render函数和updated()钩子函数进行数据填充与渲染。

1、在Table的Colums中加入

 1 {
 2     title: '比例图',
 3  align: 'center',  4  render: (h,  5  params)=>{  6  returnh('div',  7  [  8  h('canvas',　　#在单元格内构造一个canvas用来放置图表  9  { 10  style: { 11  height: '100px', 12  margin: '0', 13  padding: '0' 14  }, 15  on: { 16 17  }, 18  attrs: { 19  id: 'lineChart'+params.index　　#每个canvas都必须加上一个id标识 20  } 21  }) 22  ]) 23  } 24 }

 2、在methods中添加方法paintChart(i,params)，该方法如下

 1 //绘制图表,i是当前表格数据的每一条的下标，params当前行的数据
 2 paintChart(i,params){
 3 　　let lineChart = Echarts.init(document.getElementById("lineChart"+i));  4 　　let topField = JSON.parse(params.topField)  5 　　let xAxisData = [a,b,c,d,e,f,g]  6 　　let seriesData = [200,254,75,235,237,100，300]  7  let option = {  8 　　　　color: ['#3398DB'],  9 　　　　tooltip : { 10 　　　　　　trigger: 'axis', 11 　　　　　　axisPointer : { // 坐标轴指示器，坐标轴触发有效 12  　　　　　　　type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' 13  　　　　　　} 14  }, 15  grid: { 16  left: '1%', 17  right: '1%', 18  bottom: '3%', 19  top:'10%', 20  containLabel: true 21  }, 22  xAxis : [ 23  { 24  type : 'category', 25  data : xAxisData, 26  axisTick: { 27  alignWithLabel: true 28  } 29  } 30  ], 31  yAxis : [ 32  { 33  type : 'value' 34  } 35  ], 36  series : [ 37  { 38  name:'直接访问', 39  type:'bar', 40  barWidth: '60%', 41  data:seriesData 42  } 43  ] 44 　　} 45 　　lineChart.setOption(option) 46 }

 3、在钩子函数updated()中调用paintChart(i,params)方法进行渲染

1 updated(){
2       let self = this
3  self.tableData.forEach((value,index)=>{ 4  this.paintChart(index,value) 5  }) 6 }