IVIEW組件Table中加入EChart柱狀圖

展現圖以下：

主要利用了render函數和updated()鉤子函數進行數據填充與渲染。

一、在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 }

 二、在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 }

 三、在鉤子函數updated()中調用paintChart(i,params)方法進行渲染

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