ECharts实训案例

最新推荐文章于 2024-04-22 10:49:39 发布

发财糕

最新推荐文章于 2024-04-22 10:49:39 发布

阅读量904

点赞数 19

文章标签：信息可视化

发财糕

本文链接：https://blog.youkuaiyun.com/zhangfafa_c/article/details/136803427

版权

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

1. 训练要点：

(1)掌握堆积柱状图的绘制

(2)掌握标准条形图的绘制

(3)掌握瀑布图的绘制

2.实现实录及步骤

（1）在 VS Code 中依次创建3个.html 文件，分别为 stackBar.html、standBar.html 和
falls.html.

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

<!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: ['20～29岁', '30～39岁', '40～49岁']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '男',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [4, 0, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [6, 3, 0],
                    markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);