ECharts实训案列

最新推荐文章于 2025-10-15 12:42:06 发布

原创

最新推荐文章于 2025-10-15 12:42:06 发布 · 556 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

文章详细介绍了如何在VSCode中使用ECharts库，通过实例展示了如何绘制堆积柱状图分析会员年龄分布、标准条形图展示入会渠道和瀑布图呈现城市消费分布。同时，还涵盖了如何制作饼图和环形图来分析会员入会来源。

实训1 ：会员基本信息及消费能力对比分析

要求：具体内容包括会员编号，姓名，性别，年龄，城市，入会方式，会员级别，会员入会日，VIP建立日，购买总金额，购买总次数。绘制标准条形图分析会员入会渠道，绘制堆积柱状图分析会员年龄分布，绘制瀑布图分析不同城市会员消费总金额分布

在vs code中分别创建3个html文件分别为staclBar.html standBar.html falls.html

1.绘制堆积柱状图

首先zaistackBar.html文件中导入js文件然后输入代码

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="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 = {
            title: {
                text: '会员年龄段分布情况',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 设置坐标轴默认为直线，可选为:'line'|'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: [4, 0, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    da