ECharts封装

ECharts封装

子组建

<template>
       <div
        class="graphLeft"
        id="graphLeft"
        style="flex: 1;height: 300px;"
      ></div>
      <div
        class="graphRight"
        id="graphRight"
        style="flex: 1;height: 300px;"
      ></div>
</template>
<script>
// import echarts from "echarts";
import * as echarts from "echarts";

export default {
  name: "Risk",
  props: {
    datas: Object
  },
  data(){
  	return{
  		
  	}
  },
  watch:{
 		//监听从父组建传过来的datas
		datas(obj){
			if (obj) {
			   this.xxx = obj.xxx;
       		   this.paintGraph(
              	 "graphLeft",
              	 this.leftGragh,
              	 0,
                 this.leftdata,
                 this.rightdata,
                 "btn"
       		   );
       	   	   this.paintGraph(
         	   	 "graphRight",
         	   	 this.rightGragh,
          	   	 1,
         	 	 this.leftdata,
         	     this.rightdata,
         	   	 "btn"
        	   );
     	    }
	    }
   },
   methods:{
   	 //通过传递不同的参数来实现不同的图表
	 paintGraph(id, obj, type) {
       let myChart = echarts.init(document.getElementById(id));
       let options = {
			title: {
       	    	text: obj.title
    		},
    		tooltip: {},
   		    xAxis: {
        		data:obj.date
    		},
   		    yAxis: {},
    		series: [{
      	  	    name: '销量',
            	type: 'bar',
        		data: obj.value
        	}]
	   };
       myChart.setOption(options);
     }
   },
}
</script>

父组建

<template>
	<risk :datas="datas" :com_type="com_type"> </risk>
</template>
<script>
	import Risk from "@/components/riskFactor/Risk";

	export default {
   		name : "riskFac",
    	components: {  Risk},
    	data(){
      		return{
      			datas:{},
      		}
      	},
      	methods:{
			getRisk() {
       			 getFinRisk({
          			id: this.risk,
         			code: this.code,
          			com_type: this.type
       			 }).then(res => {
          			if (res.statusCode === 200) {
            			this.datas = res.content;
         		    }
        		});
     	    },
		},
    }
</script>