使用echarts官方柱状图时,有些示例是没有展示每个柱子所代表的的数值的,所以需要自己进行设置一下。

  • 官方柱状图排序示例代码如下:
option = {
    dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
    }, {
        transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
        }
    }],
    xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 },
    },
    yAxis: {},
    series: {在这里插入代码片
        type: 'bar',
        encode: { x: 'name', y: 'score' },
        datasetIndex: 1
    }
};
  • 想要添加柱子上方的数值只需要在 series 字段中添加如下内容即可:
series: {
	type: 'bar',
	encode: { x: 'name', y: 'score' },
	datasetIndex: 1,
	label: {
		normal: {
			show: true,
			position: 'top'
		},
		formatter: '{@value}'
	}
}
  • position 字段可以自行修改,支持 top/bottom/left/right ,修改过后如下图:
    01
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐