脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Echarts画柱状图

Vue使用Echarts画柱状图详解

 更新时间：2022年12月16日 08:30:31   作者：爱学习de测试小白  
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库，这篇文章主要介绍了Vue使用Echarts画柱状图

前言

本篇来学习下柱状图的实现

柱状图实现步骤

  • ECharts 最基本的代码结构
  • 准备x轴的数据
  • 准备 y 轴的数据
  • 准备 option , 将 series 中的 type 的值设置为: bar
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    var myCharts = echarts.init(document.getElementById('app'))
    // 准备数据 将type的值设置为bar
    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr
            }
        ]
    }
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>
</html>

效果

柱状图常见效果

标记

markPoint：最大值\最小值

markPoint: {   // 标记最大最小值
     data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
        ]
    }

效果

markLine：平均值

markLine: {
      data: [
             {
                 type: 'average', name: '平均值'
             }
         ]
     }

效果

显示

lable：数值显示

 label: {
        show: true,  // 柱状图显示数值
        rotate: 30, // 值旋转角度
    }

效果

barWidth：柱的宽度

barWidth: '30%' // 柱的宽度

效果

横向柱状：只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为

value , yAxis 的 type 设置为 category , 并且设置 data 即可

xAxis: {
            // type: 'category',
            // data: xDataArr
            type: 'value'
        },
        yAxis: {
            // type: 'value'
            type: 'category',
            data: xDataArr
        },

效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-柱状图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 准备数据 将type的值设置为bar
    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr  
            // type: 'value'  // 横向柱状图使用
        },
        yAxis: {
            type: 'value'
            // type: 'category', // 横向柱状图使用
            // data: xDataArr
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr,
                markPoint: {   // 标记最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱状图显示数值
                    rotate: 30, // 值旋转角度
                },
                barWidth: '30%' // 柱的宽度
            }
        ]
    }
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>
</html>

到此这篇关于Vue使用Echarts画柱状图详解的文章就介绍到这了,更多相关vue Echarts画柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • element el-tree组件的动态加载、新增、更新节点的实现

    element el-tree组件的动态加载、新增、更新节点的实现

    这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 基于ant-design-vue实现表格操作按钮组件

    基于ant-design-vue实现表格操作按钮组件

    这篇文章主要为大家介绍了基于ant-design-vue实现表格操作按钮组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧
    2023-10-10
  • 在 Vue 3 中上传 KML 文件并在地图上显示的实现方法

    在 Vue 3 中上传 KML 文件并在地图上显示的实现方法

    KML 文件作为一种标准的地理数据格式,广泛应用于地理信息系统（GIS）中,通过 OpenLayers 和 Vue 3 的组合,您可以方便地实现地图数据的可视化和交互,本文介绍在 Vue 3 中上传 KML 文件并在地图上显示的实现方法,感兴趣的朋友一起看看吧
    2024-12-12
  • Vue中key的原理以及diff算法详解

    Vue中key的原理以及diff算法详解

    这篇文章主要介绍了Vue中key的原理以及diff算法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue+elementui实现点击table中的单元格触发事件--弹框

    vue+elementui实现点击table中的单元格触发事件--弹框

    这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE django 跨域、csrf令牌的问题

    VUE django 跨域、csrf令牌的问题

    在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法
    2024-09-09
  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    滚动条能够给用户带来极好的体验效果，今天通过本文给大家分享vue实现一个滚动条样式，代码简单易懂，需要的朋友参考下吧
    2021-07-07
  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • vue项目中引入js-base64方式

    vue项目中引入js-base64方式

    这篇文章主要介绍了vue项目中引入js-base64方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04

最新评论