ECharts_柱状图(bar)

清风不是明月

已于 2022-03-29 19:33:33 修改

阅读量731

点赞数

分类专栏：前端_Echarts 文章标签： echarts

于 2022-02-10 14:00:50 首次发布

本文链接：https://blog.csdn.net/weixin_55806809/article/details/122859540

版权

前端_Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

柱状图一般用于：显示各个类目的数量多少。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--一、引入echarts.js文件-->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
<!--二、准备一个呈现图标的盒子(一定要有宽和高)-->
<div style="width: 600px;height: 400px"></div>
<script>
    // 三、初始化eCharts实例对象,echarts.init()方法
    let mCharts = echarts.init(document.querySelector('div'));// 参数是dom元素，决定图标最终呈现的位置
    let xDataArr = ['张三', '李四', '王五', '赵六'];//x轴数据
    let yDataArr = [98, 59, 69, 78];//y轴数据
    // 四、准备配置项（有这个决定是说明图表）
    let option = {
        // 标题组件(非必须)
        title: {
            text: '成绩'
        },

        /*横向轴效果 */
        // xAxis: {
        //     type: 'value',// category 类目轴
        //
        // },
        // yAxis: {
        //     type: 'category',// value 数值轴，到series找数据
        //     data: xDataArr // 类目轴数据
        // },
        /*如果需要横向轴,只需要X轴和Y轴的type互换 */

        // x轴
        xAxis: {
            type: 'category',// category 类目轴
            data: xDataArr // x轴数据
        },
        // y轴
        yAxis: {
            type: 'value',// value 数值轴，到series找数据
        },
        // 系列列表，通过type决定图标类型(给数值轴提供数据)
        series: [
            {
                name: '语文',
                type: 'bar',// bar 柱状图；line 折线图；pie 饼图
                // 最大值和最小值(非必须)
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'},
                    ]
                },
                //平均值(非必须)
                markLine: {
                    data: [{type: 'average', name: '平均值'}]
                },
                // 显示数值(非必须)
                label: {
                    show: true,
                    rotate: 90,// 90读旋转
                    position:'inside',//数字显示位置： inside内部(默认)
                },
                // 柱的宽度
                barWidth:'30%',
                data: yDataArr //y轴数据
            }
        ]
    }
    // 五、进配置项设置给eCharts的实例对象
    mCharts.setOption(option)
</script>
</body>
</html>