Vue中引入echarts

前言

    不知道大家有沒有這種感受，當作完一個項目的時候感受有點懵，‘我是誰，我在哪，我在幹什麼’。 哈哈哈，反正我是有。項目作完了，抽出點時間來總結一下，在項目中遇到的一些問題以及解決的方法。ps: 防止下次遇到一樣的問題，不知所措。

項目中引入echarts

     因爲項目的數據比較多，須要引入echarts來更直觀的展現數據，也能夠在更加方便的完成不少Canvas 功能。

1) 引Echarts 問題

1> 安裝 Echarts

npm install echarts  --save
複製代碼

2> 在main.js中引入Echarts

//引入echart
 import echarts from 'echarts'
 //將echarts引入到vue的原型中
 Vue.prototype.$echarts = echarts
複製代碼

3> 在組件中使用

html   掛載在div標籤上
  <div id="myChart"  class="echartBox" :style="{width: '100%', height: '400px'}"></div>
  
js  mounted () {
     //繪製餅圖
   drawPie (item) {
    let that = this
    let callNameList = []
    let callNumList = []
    if (!item || item.length == 0){
      callNameList = ["空號", "關機", "停機數", "通話中", "接通數"]
      callNumList =  [
       {name: '空號',value: 0},
       {name: '關機',value: 0},
       {name: '停機數',value: 0},
       {name: '通話中',value: 0},
       {name: '接通數',value: 0},
      ]
    }else  if (item[0]) {
     item.forEach((it) => {
       callNameList.push(it.callName)
       callNumList.push({value: it.num,name: it.callName})
     })
   }
  // 基於準備好的dom，初始化echarts實例
 let myChart = this.$echarts.init(document.getElementById('myChart'));
 let option = {
  tooltip : {
   trigger: 'item',
   formatter: "{a} <br/>{b} : {c} "
  },
  legend: {
   orient: 'horizontal',
   left: 'center',
   top: 'bottom',
   icon: 'circle',
   itemWidth: 6,
   itemHeight: 6,
   // itemGap: 40, //設置間距
   textStyle:{//圖例文字的樣式
    color:'#929292',
    fontSize:12
   },
   data: callNameList
  },
  color:['#5fcdff','#4f5dff','#ffcb17','#0fcb17','#00e1c9','#90e1c9'],
  series : [
   {
    name: '訪問來源',
    type: 'pie',
    radius : '55%',
    center: ['50%', '40%'],
    data:callNumList,
    itemStyle: {
     emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
    }
  }
  ]
 }
 myChart.setOption(option,window.onresize = myChart.resize)
 },
}
複製代碼

顯示效果：

遇到的問題

1> 當餅圖渲染的函數，放在vue的生命鉤子created中時，運行會報這樣的錯誤，這是由於在created鉤子中，元素尚未渲染完。將餅圖渲染的函數放在vue的生命鉤子mounted 中就能夠正常渲染了。

2> 想要餅圖的大小隨着瀏覽器的變化而變化，正常狀況下，餅圖的大小是不會變化的，須要加上 myChart.setOption(option,window.onresize = myChart.resize) 就能夠了。

以上就是我在vue項目中引入Echarts 遇到的問題，親測有用喲。 若是這篇文章對你有用，能否給個贊或關注，我會時不時更新文章的，記錄一些項目中遇到的坑。你們一塊兒進步，ღ( ´･ᴗ･` )比心