基于Echarts实现可视化数据大屏大数据可视化的方法和流程

原创

网络技术联盟站

发布于 2023-06-04 19:16:52

2.2K0

发布于 2023-06-04 19:16:52

文章被收录于专栏：网络技术联盟站网络技术联盟站

随着大数据时代的到来，数据可视化成为一种重要的工具。它将庞大复杂的数据转化成直观、易懂的图形，便于用户快速理解和分析数据。而Echarts是一种优秀的数据可视化工具，能够帮助我们实现各种各样的数据可视化。

本文将详细介绍基于Echarts实现可视化数据大屏大数据可视化的方法和流程，并且给出一个实例进行演示。

Echarts简介

Echarts是由百度前端技术部研发的一款开源的数据可视化工具库。它支持多种图表类型，如折线图、柱状图、饼图、散点图等等。同时，Echarts还提供了丰富的配置项和交互功能，可以帮助我们轻松地实现各种各样的数据可视化。

可视化数据大屏设计思路

在实现可视化数据大屏之前，我们需要先明确设计思路。一般来说，设计一个可视化数据大屏需要考虑以下几点：

1. 数据来源

首先，我们需要明确数据来源。数据可以来自数据库、API接口或其他数据源。

2. 数据处理

数据处理是可视化数据大屏设计的核心。我们需要将原始数据进行加工、过滤和计算，生成需要展示的数据。

3. 页面布局

页面布局包括大屏元素的排布方式、大小、颜色等等。这一点需要根据实际情况进行调整，使得页面看起来简洁明了、美观大方。

4. 图表类型选择

Echarts支持多种图表类型，我们需要根据数据特征选择适合的图表类型进行展示。

5. 交互效果

交互效果能够提高用户体验，并且让用户更好的理解数据。例如，鼠标悬浮时能够显示具体数值、能够缩放和平移图表等等。

实现方法及流程

下面将介绍基于Echarts实现可视化数据大屏大数据可视化的具体方法和流程。

1. 数据准备

首先，我们需要准备数据。数据可以来自数据库、API接口或其他数据源。本文以Mock.js为例来生成模拟数据。

// Mock.js生成随机数据
var data = Mock.mock({
    "data|10": [
        {
            "name|+1": ["张三", "李四", "王五", "赵六", "钱七"],
            "age|18-60": 1,
            "gender|0-1": 1,
            "score|60-100": 1
        }
    ]
});

2. 数据处理

接下来，我们需要对数据进行加工、过滤和计算，生成需要展示的数据。本文以Echarts中的柱状图为例来展示数据。

// 分组统计分数平均值
var seriesData = [];
var legendData = [];
var xAxisData = [];

for (var i = 0; i < data.data.length; i++) {
    var d = data.data[i];
    var name = d.name;
    var score = d.score;

    if (legendData.indexOf(name) == -1) {
        legendData.push(name);
    }

    var index = xAxisData.indexOf(name);
    if (index == -1) {
        xAxisData.push(name);
        seriesData.push(score);
    } else {
        seriesData[index] = (seriesData[index] + score) / 2;
    }
}

3. 页面布局

页面布局包括大屏元素的排布方式、大小、颜色等等。这一点需要根据实际情况进行调整，使得页面看起来简洁明了、美观大方。本文使用Bootstrap框架进行布局。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="chart1" style="height: 300px;"></div>
        </div>
        <div class="col-md-6">
            <div id="chart2" style="height: 300px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="chart3" style="height: 400px;"></div>
        </div>
    </div>
</div>

4. 图表类型选择

Echarts支持多种图表类型，我们需要根据数据特征选择适合的图表类型进行展示。本文使用柱状图、饼图和散点图来展示数据。

// 柱状图
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
    title: {
        text: '分数统计'
    },
    tooltip: {},
    legend: {
        data: ['分数']
    },
    xAxis: {
        data: xAxisData
    },
    yAxis: {},
    series: [{
        name: '分数',
        type: 'bar',
        data: seriesData
    }]
};
chart1.setOption(option1);

// 饼图
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
    title: {
        text: '性别比例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data: ['男', '女']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 335, name: '男'},
                {value: 310, name: '女'}
            ]
        }
    ]
};
chart2.setOption(option2);

// 散点图
var chart3 = echarts.init(document.getElementById('chart3'));
var option3 = {
    title: {
        text: '年龄分布'
    },
    xAxis: {
        type: 'value',
        scale: true,
        axisLabel: {
            formatter: '{value} 岁'
        }
    },
    yAxis: {
        type: 'value',
        scale: true,
        axisLabel: {
            formatter: '{value} 分'
        }
    },
    series: [{
        symbolSize: 20,
        data: [[22, 80], [35, 60], [45, 50], [32, 90], [28, 70]],
        type: 'scatter'
    }]
};
chart3.setOption(option3);

5. 交互效果

交互效果能够提高用户体验，并且让用户更好的理解数据。例如，鼠标悬浮时能够显示具体数值、能够缩放和平移图表等等。本文使用Echarts自带的交互功能。

chart1.on('mouseover', function (params) {
    var dataIndex = params.dataIndex;
    var score = seriesData[dataIndex];
    chart1.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex,
        name: '分数：' + score
    });
});

chart1.on('mouseout', function (params) {
    chart1.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0
    });
});

chart2.on('mouseover', function (params) {
    var gender = params.name;
    chart2.dispatchAction({
        type: 'highlight',
        name: gender
    });
});

chart2.on('mouseout', function (params) {
    chart2.dispatchAction({
        type: 'downplay',
        name: params.name
    });
});

chart3.on('mouseover', function (params) {
    var age = params.value[0];
    var score = params.value[1];
    chart3.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        position: [params.event.offsetX, params.event.offsetY],
        dataIndex: params.dataIndex,
        name: '年龄：' + age + ' 岁，分数：' + score
    });
});

chart3.on('mouseout', function (params) {
    chart3.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0
    });
});

示例演示

最后，我们来演示一下实现过程。本文采用CDN方式引入Echarts和Bootstrap的CSS和JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视化数据大屏</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mockjs/1.1.0/mock-min.js"></script>
</head>
<body>
    <h1>可视化数据大屏</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div id="chart1" style="height: 300px;"></div>
            </div>
            <div class="col-md-6">
                <div id="chart2" style="height: 300px;"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="chart3" style="height: 400px;"></div>
            </div>
        </div>
    </div>

    <script>
        // Mock.js生成随机数据
        var data = Mock.mock({
            "data|10": [
                {
                    "name|+1": ["张三", "李四", "王五", "赵六", "钱七"],
                    "age|18-60": 1,
                    "gender|0-1": 1,
                    "score|60-100": 1
                }
            ]
        });

        // 分组统计分数平均值
        var seriesData = [];
        var legendData = [];
        var xAxisData = [];

        for (var i = 0; i < data.data.length; i++) {
            var d = data.data[i];
            var name = d.name;
            var score = d.score;

            if (legendData.indexOf(name) == -1) {
                legendData.push(name);
            }

            var index = xAxisData.indexOf(name);
            if (index == -1) {
                xAxisData.push(name);
                seriesData.push(score);
            } else {
                seriesData[index] = (seriesData[index] + score) / 2;
            }
        }

        // 柱状图
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option1 = {
            title: {
                text: '分数统计'
            },
            tooltip: {},
            legend: {
                data: ['分数']
            },
            xAxis: {
                data: xAxisData
            },
            yAxis: {},
            series: [{
                name: '分数',
                type: 'bar',
                data: seriesData
            }]
        };
        chart1.setOption(option1);

        // 饼图
        var chart2 = echarts.init(document.getElementById('chart2'));
        var option2 = {
            title: {
                text: '性别比例'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                data: ['男', '女']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: 335, name: '男'},
                        {value: 310, name: '女'}
                    ]
                }
            ]
        };
        chart2.setOption(option2);

        // 散点图
        var chart3 = echarts.init(document.getElementById('chart3'));
        var option3 = {
            title: {
                text: '年龄分布'
            },
            xAxis: {
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} 岁'
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [{
                symbolSize: 20,
                data: [[22, 80], [35, 60], [45, 50], [32, 90], [28, 70]],
                type: 'scatter'
            }]
        };
        chart3.setOption(option3);

        // 悬浮提示
        chart1.on('mouseover', function (params) {
            var dataIndex = params.dataIndex;
            var score = seriesData[dataIndex];
            chart1.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex,
                name: '分数：' + score
            });
        });

        chart1.on('mouseout', function (params) {
            chart1.dispatchAction({
                type: 'hideTip',
                seriesIndex: 0
            });
        });

        chart2.on('mouseover', function (params) {
            var gender = params.name;
            chart2.dispatchAction({
                type: 'highlight',
                name: gender
            });
        });

        chart2.on('mouseout', function (params) {
            chart2.dispatchAction({
                type: 'downplay',
                name: params.name
            });
        });

        chart3.on('mouseover', function (params) {
            var age = params.value[0];
            var score = params.value[1];
            chart3.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                position: [params.event.offsetX, params.event.offsetY],
                dataIndex: params.dataIndex,
                name: '年龄：' + age + ' 岁，分数：' + score
            });
        });

        chart3.on('mouseout', function (params) {
            chart3.dispatchAction({
                type: 'hideTip',
                seriesIndex: 0
            });
        });
    </script>
</body>
</html>

结论

以上便是基于Echarts实现可视化数据大屏大数据可视化的详细方法和流程。通过本文的介绍，我们可以初步了解如何使用Echarts来实现各种各样的数据可视化，并且能够在实践中不断提高自己的技能水平。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

echarts

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

echarts

登录后参与评论

0 条评论

热度