vue中饼状图的使用

Posted 2021-01-11 mmy67

图形构建子组件

<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>

　　(房屋管理)