前言

    不知道你们有没有这种感觉，当做完一个项目的时候感觉有点懵，‘我是谁，我在哪，我在干什么’。 哈哈哈，反正我是有。项目做完了，抽出点时间来总结一下，在项目中遇到的一些问题以及解决的方法。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)
 },
}

显示效果：

image

遇到的问题

1> 当饼图渲染的函数，放在vue的生命钩子created中时，运行会报这样的错误，这是因为在created钩子中，元素还没有渲染完。将饼图渲染的函数放在vue的生命钩子mounted 中就可以正常渲染了。

image
2> 想要饼图的大小随着浏览器的变化而变化，正常情况下，饼图的大小是不会变化的，需要加上myChart.setOption(option,window.onresize = myChart.resize) 就可以了。

以上就是我在vue项目中引入Echarts 遇到的问题，亲测有用哟。 如果这篇文章对你有用，可否给个赞或关注，我会时不时更新文章的，记录一些项目中遇到的坑。大家一起进步，ღ( ´･ᴗ･` )比心