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

原创

于 2017-07-17 10:07:57 发布 · 1.3w 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用vue-echarts-v3库创建柱状图，强调了纵坐标动态变化、柱顶显示内容、鼠标悬停显示详情以及根据查询结果动态更新数据的需求。同时，提到了在IEcharts标签中设置高度和宽度的重要性，以及将option属性的bar变量置于computed属性而非data属性中以实现数据动态更新。目前遇到的问题是出现了柱状图分段显示异常，作者正在寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下

需求：

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];//  并设置横坐标数据
 &nbs