echart学习 柱状图

echart学习 柱状图

  • 作者:geticsen
  • 时间:2019-08-16
  • 459人已阅读
简介 昨天简单入门 画了下图然后就去改bug去了,今天继续学习echart画图

首先我们来画一个柱状图吧这次不用自己的编辑器了,只是学习而已

ok,流程如下:

image.png

你随意点进入红框里面的一个我选择左下角第一个,进入如下所示界面开始学习:

image.png

由于介绍较少,你可以将全部的柱状图都打开然后学习:

这个代码运行结果如上一图所示

app.title = '世界人口总量 - 条形图';
option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

title:图的标题

legend:图的显示条目分类

grid:边距等的控制

xAxis:x的数据/条目

yAxis:y的数据/条目

series:数据

我们将 xAxis与yAxis互换就可以将横向的图变成竖向的柱状图

yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
xAxis: {
        type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
    },

image.png

ok现在,如果我们要将2011与2012年的数据合起来一起显示怎么办呢,这个echart提供了方法只需要把,series里面的数据加一个stack属性就可以了

series: [
        {
            name: '2011年',
            
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
    
//改变成如下
series: [
        {
            name: '2011年',
            type: 'bar',
            stack:"year",
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            stack:"year",
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]

我们就能得到如下的图:

image.png

那要是把每个数据所对应的大小显示在图形上怎么办呢??

其实也很简单:
只需要在series里面加入label就好了,如下所示:

series: [
        {
            name: '2011年',
            type: 'bar',
            stack:"year",
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            stack:"year",
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]

image.png

这里简单说一下label里面的position参数insideTop指的是显示在条状图内部的顶部

label: {
        normal: {
           show: true,
           position: 'insideTop'
        }
},

那我们自然就可以想到条状图内部的底部

label: {
                normal: {
                    show: true,
                    position: 'insideBottom'
                }
},

image.png

其他也是差不多。ok就到这里我继续学习去了。

文章评论

Top