快捷導(dǎo)航

Vue使用Echarts畫柱狀圖詳解

更新時(shí)間：2022年12月16日 08:30:31 作者：愛學(xué)習(xí)de測(cè)試小白

數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過(guò)程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)，這篇文章主要介紹了Vue使用Echarts畫柱狀圖

前言

本篇來(lái)學(xué)習(xí)下柱狀圖的實(shí)現(xiàn)

柱狀圖實(shí)現(xiàn)步驟

ECharts 最基本的代碼結(jié)構(gòu)
準(zhǔn)備x軸的數(shù)據(jù)
準(zhǔn)備 y 軸的數(shù)據(jù)
準(zhǔn)備 option , 將 series 中的 type 的值設(shè)置為: 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'))
    // 準(zhǔn)備數(shù)據(jù) 將type的值設(shè)置為bar
    var xDataArr = ['張三', '李四', '王五', '大明白', '小糊涂'] // x軸數(shù)據(jù)
    var yDataArr = [88, 92, 63, 77, 94]  // y軸數(shù)據(jù)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '分?jǐn)?shù)',
                type: 'bar',  // 圖表類型  bar:柱狀圖   line:折線圖   pie:餅圖
                data: yDataArr
            }
        ]
    }
    // 將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

效果

柱狀圖常見效果

標(biāo)記

markPoint：最大值\最小值

markPoint: {   // 標(biāo)記最大最小值
     data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
        ]
    }

效果

markLine：平均值

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

效果

顯示

lable：數(shù)值顯示

 label: {
        show: true,  // 柱狀圖顯示數(shù)值
        rotate: 30, // 值旋轉(zhuǎn)角度
    }

效果

barWidth：柱的寬度

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

效果

橫向柱狀：只需要讓x軸的角色和y軸的角色互換一下即可. 既 xAxis 的 type 設(shè)置為

value , yAxis 的 type 設(shè)置為 category , 并且設(shè)置 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>
<!-- 準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts實(shí)例對(duì)象
    var myCharts = echarts.init(document.getElementById('app'))
    // 準(zhǔn)備數(shù)據(jù) 將type的值設(shè)置為bar
    var xDataArr = ['張三', '李四', '王五', '大明白', '小糊涂'] // x軸數(shù)據(jù)
    var yDataArr = [88, 92, 63, 77, 94]  // y軸數(shù)據(jù)
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr  
            // type: 'value'  // 橫向柱狀圖使用
        },
        yAxis: {
            type: 'value'
            // type: 'category', // 橫向柱狀圖使用
            // data: xDataArr
        },
        series: [
            {
                name: '分?jǐn)?shù)',
                type: 'bar',  // 圖表類型  bar:柱狀圖   line:折線圖   pie:餅圖
                data: yDataArr,
                markPoint: {   // 標(biāo)記最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱狀圖顯示數(shù)值
                    rotate: 30, // 值旋轉(zhuǎn)角度
                },
                barWidth: '30%' // 柱的寬度
            }
        ]
    }
    // 將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
    myCharts.setOption(option)
</script>
</body>
</html>

到此這篇關(guān)于Vue使用Echarts畫柱狀圖詳解的文章就介紹到這了,更多相關(guān)vue Echarts畫柱狀圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: