效果如下

需求：

1、縱座標為數字，並且動態變化

2、柱狀圖頂部展示內容

3、滑鼠移動到柱狀圖展示內容

4、圖表要根據查詢結果動態展示

開始：

<!-- 郵件推送圖示分析 -->
<template>  
    <div>    
        <IEcharts :option="bar" style="width:800px;height:500px;" :loading="loading" @ready="onReady" @click="onClick"></IEcharts> 
    </div>
</template>
<script>
    import IEcharts from 'vue-echarts-v3';
    
    export default { 
        data () {
            return {
                loading: false, 
                maxy:200,//縱座標
                xdata:[0,0]//柱體橫座標
            }
        },
        watch:{ 
        },
        methods: { 
 

		getCount(timestr,sender,checked){  
                	this.$http.post(this.getUrl()+"/email/getCount.do", {timestr : timestr,sender:sender,checked:checked},{emulateJSON:true}).then(
                        (data)=>{
                         this.maxy = data.body.totalnum; //從後臺獲取總數，並設定縱座標
                         this.xdata = [data.body.valopennum,data.body.opennum];//  並設定橫座標資料
                        },(error)=>{
                            console.log("錯誤");
                        }
                    ) 
            },
		    onReady(instance){
		        console.log(instance);
		    },
		    onClick(event, instance, echarts){
		    	// let gg = event;dataIndex  
		    	let emailstate = "";
		    	if(event.dataIndex==0){//點選了第一個柱體
		    		//邏輯判斷
		    	}else{////點選了第二個柱體
		    		//邏輯判斷
 

	                }
		    },
		    Percentage(num, total) { //求百分數，兩位小數
		    	let rate = Math.round(num / total * 10000) / 100.00 + "%";
		    	if(rate=="NaN%"){
		    		return "0.00%";
		    	}else{
		    		return rate;
		    	} 
		   } 
        },
        mounted () {
        	  
        },
        computed:{ 
        	bar:function(){//個人測試得知不能把bar寫在data內，因為無法動態改變資料，不知道是不是自己哪裡沒有設定好
        		return{
				    title: {//圖表標題
				      text: '統計分析'
				    },
				    color:['rgb(25, 183, 207)'],
				    tooltip: {  
			            trigger : 'item',  
			            show:true,  
			            showDelay: 0,  
			            hideDelay: 0,  
			            transitionDuration:0,   
			            backgroundColor : 'rgba(25, 183, 207,1)',  
			            borderColor : '#f50', 
			            borderRadius : 8,  
			            borderWidth: 2,  
			            padding: 10,    // [5, 10, 15, 20]  
			            formatter:(params,ticket,callback)=> {//可以從params中拿到柱體的資料
							return "點選檢視"; 
			             }   
				    },
				    xAxis: {
				      data: ['當天開啟數/開啟率', '總開啟數/開啟率']
				    },
				    calculable :true,
				    yAxis: [  
			            {  
				 	max:this.maxy,//動態改變縱座標總數
					splitNumber:1,//分割成1段
			                type : 'value',  
			                data :[0]   
			            }  
			        ], 
				    series: [{
				        name: 'series_name',
				        type: 'bar',
				        data: this.xdata,
				        itemStyle:{
				       	    normal:{
				       	    	label : {  
		                            		show : true,  
		                            		position : 'top'  , //柱體定不顯示內容top,right,left
		                            		formatter:(params,ticket,callback)=>
							{  
						   		let percent = this.Percentage(params.value,this.maxy);  
						   		var res = "開啟率："+percent+'\n\n'+"開啟數："+params.value;  
						   		return res;  
		                            		}   
		                             	}  
				       	    },
				       	    emphasis : {  
		                                label : {  
		                                	show : true,  
		                                	textStyle : {  
		                                    	  color : 'orange',  
		                                    	  fontWeight : 'bold'
		                                	}  
		                            	}  
		                            } 
				        }
				    }]
			    }
			}, 
        },
        components: {//使用的外部元件都需要在此填寫
            IEcharts
        }

    }
</script>
<style>
</style>
 

說明：

1、首先要在IEcharts標籤內定義高度和寬度，否則不會顯示，只在父標籤上定義高度和寬度也不行

2、option屬性對應的變數bar必須寫在computed中，不能寫在data中，個人測試寫在data中無法動態改變資料表現在圖表中

問題：如圖中所示，不曉得怎麼會出現兩個分段，還在解決中