实训，掌握堆积柱状图，标注条形图，瀑布图，饼图，环形图

本文链接：https://blog.csdn.net/z912631832/article/details/136818779

文章详细描述了如何在HTML中使用Echarts.js库分别创建堆积柱状图、标准条形图、瀑布图和饼图以及环形图，包括各自文件中的代码示例和配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.绘制堆积柱状图。首先，在 stackBar.html 文件中引入 echarts.js 库文件。其次，准备一个具备大小（weight 与height）的 div 容器，并使用 init()方法初始化容器。最后设置堆积柱状图的配置项、“性别”与“年龄”数据完成标准条形图绘制。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title> 
    </head>
    <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow' 
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: ['20-29岁', '30-39岁', '40-49岁']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '男',
                    type: 'bar',
                    stack: '年龄段', 
                    data: [7, 5, 1]
                },