用echarts绘制柱状图

1,742 阅读3分钟

柱状图(Bar)为常用的图表之一,由一系列长度不等的纵向或横向条纹来表示数据分布的情况,一般用横轴表示数据类型,纵轴表示分布情况。ECharts提供了各种各样的柱状图。 为了更直观地查看商品销售数据、广告类别数据、人口数据和生活消费数据,需要在ECharts中绘制不同的柱状图进行展示,如标准柱状图、堆积柱状图、条形图和瀑布图。

柱状图的核心思想是对比,常用于显示一段时间内的数据变化或显示各项之间的比较情况。柱状图的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。例如,年销售额就是二维数据,即“年份”和“销售额”,但只需要比较“销售额”这一个维度。柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。 一般,柱状图的x轴是时间维,用户习惯性地认为存在时间趋势。如果遇到x轴不是时间维的情况,建议用不同的颜色区分每根柱子,改变用户对时间趋势的关注。柱状图的局限在于只适用中小规模的数据集。

利用某商品一年的销量数据绘制标准柱状图,如图所示

image.png

对图形中的各种组件进行简单注解,如图所示。一张图表一般包含用于显示数据的网格区域、x坐标轴、y坐标轴(包括坐标轴标签、坐标轴刻度、坐标轴名称、坐标轴分隔线、坐标轴箭头)、主/副标题、图例、数据标签等组件。 这些组件都在图表中扮演着特定的角色,表达了特定的信息。但这些组件并不都是必备的,当信息足够清晰时,可以精简部分组件,使得图表更加简洁。

image.png

在堆积柱状图中,每一根柱子上的值分别代表不同的数据大小,各个分层的数据总和代表整根柱子的高度。堆积柱状图适合少量类别的对比,并且对比信息特别清晰。堆积柱状图显示单个项目与整体之间的关系,可以形象地展示一个大分类包含的每个小分类的数据,以及各个小分类的占比情况,使图表更加清晰。当需要直观地对比整体数据时,不适合用簇状柱状图而适合用堆积柱状图。 利用某广告一周内使用不同投放类型产生的观看量数据绘制堆积柱状图,如图所示。

image.png

在图中,每天的数据有4根柱子,其中,第2根柱子是堆叠的,由邮件营销、联盟广告、视频广告3种不同类型的广告组成,第2根柱子的长度代表这3种不同的广告的总和。第4根柱子也是堆叠的,由百度、谷歌、必应、其他4种不同类型的搜索引擎组成,而第3根柱子则是第4根子中的4种搜索引擎的总和。

最后绘制出来的图

image.png

源代码如下:

<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小(宽高)的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM,初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            backgroundColor: '#2c343c',
            title: {  //配置标题组件,包含主标题和副标题
                text: '这是主标题',
                textStyle: {  //设置主标题样式
                    color: '#fff'
                },
                subtext: '这是副标题',  //设置副标题样式
                subtextStyle: {
                    color: '#bbb'
                },
                padding: [10, 0, 100, 100]  //设置标题位置,用padding属性来定位
            },
            legend: {  //配置图例组件
                type: 'plain',  //设置图例类型,默认为'plain',当图例很多时可使用'scroll'
                top: '1%',  //设置图例相对容器位置,top\bottom\left\right
                selected: {
                    '销量': true,  //设置图例是否显示,默认为true
                },
                textStyle: {  //设置图例内容样式
                    color: '#fff',  //设置所有图例的字体颜色
                    //backgroundColor: 'black',  //设置所有图例的字体背景色
                },
                tooltip: {  //设置图例提示框,默认不显示
                    show: true,
                    color: 'red',
                },
                data: [  //设置图例内容
                    {
                        name: '销量',
                        icon: 'circle',  //设置图例的外框样式
                        textStyle: {
                            color: '#fff',  //单独设置某一个图例的颜色
                            //backgroundColor: 'black',  //单独设置某一个图例的字体背景色
                        }
                    }
                ],
            },
            tooltip: {  //配置提示框组件
                show: true,  //设置是否显示提示框,默认为true
                trigger: 'item',  //设置数据项图形触发
                axisPointer: {  //设置指示样式
                    type: 'shadow',
                    axis: 'auto',
                },
                padding: 5,
                textStyle: {  //设置提示框内容样式
                    color: "#fff",
                },
            },
            grid: {  //配置grid区域
                show: false,  //设置是否显示直角坐标系网格
                top: 80,  //设置相对位置,top\bottom\left\right
                containLabel: false,  //设置grid区域是否包含坐标轴的刻度标签
                tooltip: {  //鼠标焦点放在图形上,产生的提示框
                    show: true,
                    trigger: 'item',  //设置触发类型
                    textStyle: {
                        color: '#fff666',  //设置提示框文字的颜色
                    }
                }
            },
            xAxis: {  //配置x轴坐标系
                show: true,  //设置x轴坐标系是否显示
                position: 'bottom',  //设置x轴位置
                offset: 0,  //设置x轴相对于默认位置的偏移
                type: 'category',  //设置轴类型,默认'category'
                name: '月份',  //设置轴名称
                nameLocation: 'end',  //设置轴名称相对位置
                nameTextStyle: {  //设置坐标轴名称样式
                    color: "#fff",
                    padding: [5, 0, 0, -5],
                },  //设置坐标轴名称相对位置
                nameGap: 15,  //设置坐标轴名称与轴线之间的距离
                //nameRotate:270,  //设置坐标轴名字旋转
                axisLine: {  //设置坐标轴轴线
                    show: true,  //设置坐标轴轴线是否显示
                    symbol: ['none', 'arrow'],  //设置是否显示轴线箭头
                    symbolSize: [8, 8],  //设置箭头大小
                    symbolOffset: [0, 7],  //设置箭头位置
                    lineStyle: {  //设置线
                        color: '#fff',  //设置坐标轴轴线的颜色
                        width: 1,  //设置坐标轴轴线的线宽
                        type: 'solid',  //设置坐标轴轴线的线型
                    },
                },
                axisTick: {  //设置坐标轴刻度
                    show: true,  //设置坐标轴刻度是否显示
                    inside: true,  //设置坐标轴刻度是否朝内
                    lengt: 3,  //设置长度
                    lineStyle: {
                        color: 'yellow',  //设置坐标轴刻度的颜色,默认取轴线的颜色
                        width: 1,  //设置坐标轴刻度的线宽
                        type: 'solid',  //设置坐标轴刻度的线型
                    },
                },
                axisLabel: {  //设置坐标轴标签
                    show: true,  //设置坐标轴标签是否显示
                    inside: false,  //设置坐标轴标签是否朝内
                    rotate: 0,  //设置旋转角度
                    margin: 5,
                },  //设置刻度标签与轴线之间的距离
                //color:'red', },  //设置默认取轴线的颜色
                splitLine: {  //设置grid区域中的分隔线
                    show: false,  //设置grid区域中的分隔线是否显示
                    lineStyle: {
                        color: 'red',
                        //width:1,
                        //type:'solid',
                    },
                },
                splitArea: {  //设置网格区域
                    show: false,
                },  //设置网格区域是否显示,默认false
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月",
                    "8月", "9月", "10月", "11月", "12月"]
            },
            yAxis: {  //配置y轴坐标系
                show: true,  //设置网格区域是否显示
                position: 'left',  //设置y轴位置
                offset: 0,  //设置y轴相对于默认位置的偏移
                type: 'value',  //设置轴类型,默认'category'
                name: '销量',  //设置轴名称
                nameLocation: 'end',  //设置轴名称相对位置value
                nameTextStyle: {  //设置坐标轴名称样式
                    color: "#fff",
                    padding: [5, 0, 0, 5],
                },  //设置坐标轴名称相对位置
                nameGap: 15,  //设置坐标轴名称与轴线之间的距离
                nameRotate: 0,  //设置坐标轴名字旋转
                axisLine: {  //设置坐标轴轴线
                    show: true,  //设置坐标轴轴线是否显示
                    //-------------------箭头-------------------------
                    symbol: ['none', 'arrow'],  //设置是否显示轴线箭头
                    symbolSize: [8, 8],  //设置箭头大小
                    symbolOffset: [0, 7],  //设置箭头位置
                    lineStyle: {  //设置线
                        color: '#fff',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisTick: {  //设置坐标轴刻度
                    show: true,  //设置坐标轴刻度是否显示
                    inside: true,  //设置坐标轴刻度是否朝内
                    length: 3,  //设置长度
                    lineStyle: {
                        //color:'red',  //设置默认取轴线的颜色
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLabel: {  //设置坐标轴标签
                    show: true,  //设置坐标轴标签是否显示
                    inside: false,  //设置坐标轴标签是否朝内
                    rotate: 0,  //设置旋转角度
                    margin: 8,  //设置刻度标签与轴线之间的距离
                    //color:'red',  //设置默认取轴线的颜色
                },
                splitLine: {  //设置grid区域中的分隔线
                    show: true,  //设置grid区域中的分隔线是否显示
                    lineStyle: {
                        color: '#666',
                        width: 1,
                        type: 'dashed',  //设置类型
                    },
                },
                splitArea: {  //设置格区域
                    show: false,  //设置格区域是否显示,默认false
                },
            },
            series: [{  //配置系列列表,每个系列通过type控制该系列图表类型
                name: '销量',  //设置系列名称
                type: 'bar',  //设置类型
                legendHoverLink: true,  //设置系列是否启用图例hover时的联动高亮
                label: {  //设置图形上的文本标签
                    show: false,
                    position: 'insideTop',  //设置相对位置
                    rotate: 0,  //设置旋转角度
                    color: '#eee',
                },
                itemStyle: {  //设置图形的形状
                    color: 'blue',  //设置柱形的颜色
                    barBorderRadius: [18, 18, 0, 0],
                },
                barWidth: '20',  //设置柱形的宽度
                barCategoryGap: '20%',  //设置柱形的间距
                data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>