数据可视化-ECharts Html项目实战

最新推荐文章于 2024-07-04 13:32:37 发布

和小猫的下雨天

最新推荐文章于 2024-07-04 13:32:37 发布

阅读量1k

点赞数 21

文章标签：信息可视化 echarts html

本文链接：https://blog.csdn.net/2403_83182454/article/details/136846664

版权

项目实践

一、会员基本信息及消费能力对比分析

1. 训练要点

掌握堆积柱状图的绘制。
掌握标准条形图的绘制。
掌握瀑布图的绘制。

2.需求说明

“会员信息表.xlsx”文件记录了某鲜花店销售系统上的会员信息，具体内容包括会“华面员编号、姓名、性别、年龄、城市、入会方式、会员级别、会员入会日、VIP建立日、注意）购买总金额、购买总次数等信息。绘制标准条形图分析会员入会渠道，绘制堆积柱状图
分析会员年龄分布，绘制瀑布图分析不同城市会员消费总金额分布。

3.实现思路及步骤

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

a.绘制堆积柱状图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/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: ['18～25岁', '25～30岁', '30～40岁']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '男',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [4, 2, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [6, 3, 2],
                    markLine: {
                        itemStyle: {
                            normal: {