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

最新推荐文章于 2024-08-10 08:16:24 发布

qq_33802316

最新推荐文章于 2024-08-10 08:16:24 发布

阅读量1.3w

点赞数 1

分类专栏： vue.js chart 柱状图

本文链接：https://blog.csdn.net/qq_33802316/article/details/75217761

版权

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

摘要由CSDN通过智能技术生成

效果如下

需求：

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:{ 
        },
        method