脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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画柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3中reactive丢失响应式的问题解决(避大坑!)

    Vue3中reactive丢失响应式的问题解决(避大坑!)

    这篇文章主要给大家介绍了关于Vue3中reactive丢失响应式的问题解决,vue3中reactive定义的引用类型直接赋值导致数据失去响应式 ,需要的朋友可以参考下
    2023-07-07
  • Vue多环境代理配置方法思路详解

    Vue多环境代理配置方法思路详解

    多人协作模式下，修改代理比较麻烦，而且很容易某个开发人员会修改了vue.config.js文件后提交了。接下来通过本文给大家分享Vue多环境代理配置方法思路详解,需要的朋友可以参考下
    2019-06-06
  • Vue自定义树形控件使用详解

    Vue自定义树形控件使用详解

    这篇文章主要为大家详细介绍了Vue自定义树形控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • echarts实现获取datazoom的起始值(包括x轴和y轴)

    echarts实现获取datazoom的起始值(包括x轴和y轴)

    这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这篇文章主要介绍了vue-cli webpack模板项目搭建以及打包时路径问题的解决方法,需要的朋友可以参考下
    2018-02-02
  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-02-02
  • Vue.js第四天学习笔记

    Vue.js第四天学习笔记

    这篇文章主要为大家详细介绍了Vue.js第四天的学习笔记，json数组数据以csv格式导出,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • axios中post请求json和application/x-www-form-urlencoded详解

    axios中post请求json和application/x-www-form-urlencoded详解

    Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue用v-for给src属性赋值的方法

    Vue用v-for给src属性赋值的方法

    下面小编就为大家分享一篇Vue用v-for给src属性赋值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 实现购物车总价计算

    vue 实现购物车总价计算

    今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论