vue.js将echarts封装为组件一键使用

 <chart></chart> //测试数据样例 [["类别1",10],["类别2",20]]

<template> <p></p></template>

function drawPie(chartData,id,titleText,xText,yText) { var chart = echarts.init(document.getElementById(id)) var xAxisData = chartData.map(function (item) {return item[0]}) var pieData = [] chartData.forEach((v,i)=&gt;{  pieData.push({  name:v[0],  value:v[1]  }) }) chart.setOption({  title : {  text: titleText,  subtext: '',  x:'center'  },  tooltip : {  trigger: 'item',  formatter: "{a} <br>{b} : {c} ({d}%)"  },  legend: {  orient: 'vertical',  left: 'left',  data: xAxisData  },  series : [  {   name: xText,   type: 'pie',   radius : '55%',   center: ['50%', '60%'],   data:pieData,   itemStyle: {   emphasis: {    shadowBlur: 10,    shadowOffsetX: 0,    shadowColor: 'rgba(0, 0, 0, 0.5)'   }   }  }  ] }) }

 watch:{  _chartData(val){  switch (this._type){   case "LineAndBar":   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);   break   case "LineOrBar":   drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);   break   case "Pie":   drawPie(val,this._id,this._titleText,this._xText,this._yText);   break   default:   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);   break  }  } }, mounted() {  switch (this._type){  case "LineAndBar":   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);   break  case "LineOrBar":   drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);   break  case "Pie":   drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);   break  default:   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);   break  } }