Echarts数据可视化：绘制基础柱状图与堆叠柱状图

2024-01-14 03:38:18

Echarts柱状图介绍

柱状图是一种常用的数据可视化图表，用于展示一些比较基础的数据。柱状图通过矩形条来表示数据，条的长度代表数据的大小。柱状图可以是水平的或垂直的，水平的柱状图称为条形图。

Echarts基本柱状图

基本柱状图是最简单的柱状图，仅包含单个数据系列。基本柱状图的绘制非常简单，首先我们需要创建一个Echarts实例，然后设置图表选项，最后将数据加载到图表中。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '基本柱状图'
    },
    xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60]
    }]
};

myChart.setOption(option);

Echarts堆叠柱状图

堆叠柱状图包含多个数据系列，每个数据系列都叠加在一起。堆叠柱状图的绘制与基本柱状图类似，只是在设置数据系列时需要将多个数据系列合并在一起。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '堆叠柱状图'
    },
    xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: {},
    series: [{
        name: '系列一',
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60]
    }, {
        name: '系列二',
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60]
    }]
};

myChart.setOption(option);