效果如下

需求：

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+'nn'+"打开数："+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中无法动态改变数据表现在图表中

问题：如图中所示，不晓得怎么会出现两个分段，还在解决中