vue中餅狀圖的使用

標籤：draw   ring   element   pen   raw   log   center   mon   charts   

圖形構建子組件

<template><div>  <div id="myChart" :style="echartStyle"></div></div></template><script>  export default {    props: {      // 樣式      echartStyle: {        type: Object,        default(){          return {           }        }      },      // 提示框鍵名      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 : ‘60%‘,              center: [‘50%‘, ‘60%‘],              selectedMode: ‘single‘,  color:[‘#4383C9‘,‘#7B5BAA‘,‘#BA6329‘,‘#B92E2E‘,‘#6E8C34‘,‘#21A579‘],              data:this.opinionData, // 扇形地區資料              itemStyle: {                emphasis: {                  shadowBlur: 10,                  shadowOffsetX: 0,                  shadowColor: ‘rgba(0, 0, 0, 0.5)‘                }              }            }          ]        })      }    },watch:{    opinionData:{    handler(val,oldval){    this.opinionData=val    this.drawPie(‘myChart‘)    },    deep:true     }    }  }</script>

　　父組件

<div class="chartright fr">               <Echarts:echartStyle="s":tooltipFormatter="b":seriesName="d":opinionData="g" v-on:currentEchartData="getEchartData" ></Echarts></div><script>export default {    data() {      return {                b:‘開房數量‘,  d:‘開房統計‘,     g:[ ],   s: { height: ‘150px‘,  }      }    },//    props:[‘monData‘],//       methods:{//    getEchartData(val){//    console.log(val);//  }//    },//    watch:{//    monData:{//    handler(val,oldval){//    console.log(val.openhouseStyle)//    for(let i=0;i<val.openhouseStyle.length;i++){//    this.g[i].value=val.openhouseStyle[i]//    }//    for(let i=0;i<val.refundStyle.length;i++){//    this.e[i].value=val.refundStyle[i]//    }//    console.log(this.g)//    }//    },//    } };</script>

　　(房屋管理)

vue中餅狀圖的使用