vue 中使用vue-echarts-v3编写chart柱状图，动态展示数据

效果如下

需求：

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中无法动态改变数据表现在图表中

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