vue 2.0 떡 모양 그림(Echarts)구성 요 소 를 사용자 정의 하 는 방법

<!--     echart    -->
<template>
 <div>
 <!-- echart   -->
 <div id="myChart" :style="echartStyle"></div>
 </div>
</template>
 
<script>
 export default {
 props: {
  //   
  echartStyle: {
  type: Object,
  default(){
   return {}
  }
  },
  //     
  titleText: {
  type: String,
  default: ''
  },
  //      
  tooltipFormatter: {
  type: String,
  default: ''
  },
  //       
  opinion: {
  type: Array,
  default(){
   return []
  }
  },
  //      
  seriesName: {
  type: String,
  default: ''
  },
  //       
  opinionData: {
  type: Array,
  default(){
   return []
  }
  },
 },
 data(){
  return {
  //
  }
 },
 mounted(){
  this.$nextTick(function() {
  this.drawPie('myChart')
  })
 },
 methods: {
  //        
  eConsole(param) {
  //       
  this.$emit("currentEchartData",param.name);
  },
  //      
  drawPie(id){
  this.charts = this.$echarts.init(document.getElementById(id));
  this.charts.on("click", this.eConsole);
  this.charts.setOption({
   title: {
   text: this.titleText, //     
   left: 'center'
   },
   tooltip : {
   trigger: 'item',
   formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
   },
   legend: {
   bottom: 20,
   left: 'center',
   data: this.opinion //       
   },
   series : [
   {
    name:this.seriesName, //      
    type: 'pie',
    radius : '65%',
    center: ['50%', '50%'],
    selectedMode: 'single',
    data:this.opinionData, //       
    itemStyle: {
    emphasis: {
     shadowBlur: 10,
     shadowOffsetX: 0,
     shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
   }
   ]
  })
  }
 }
 }
</script>
 
<style lang="less" scoped>
 #myChart{
 width: 100%;
 }
</style>

<!--    -->
<template>
 <div>
 <!--     -->
 <mt-header title="  ">
  <router-link to="/" slot="left">
  <mt-button icon="back">  </mt-button>
  </router-link>
 </mt-header>
 <!--    -->
 <m-echarts
  :echartStyle="s"
  :titleText="a"
  :tooltipFormatter="b"
  :opinion="c"
  :seriesName="d"
  :opinionData="e"
  v-on:currentEchartData="getEchartData"
 ></m-echarts>
 </div>
</template>
 
<script>
 import mEcharts from '../components/Echarts'
 
 export default {
 name: 'Diagram',
 components: {
  mEcharts
 },
 data(){
  return {
  a:'      ',
  b:'    ',
  c:['  ','  ','  '],
  d:'    ',
  e:[
   {value:3, name:'  '},
   {value:3, name:'  '},
   {value:3, name:'  '}
   ],
  s: {
   height: ''
  }
  }
 },
 created(){
  //       
  this.s.height = document.documentElement.clientHeight - 44 + 'px';
 },
 methods: {
  getEchartData(val){
  console.log(val);
  }
 }
 }
</script>
 
<style lang="less" scoped>
 //
</style>