动态数据下的Echarts可视化平台构建

最新推荐文章于 2023-05-16 21:14:27 发布

dltan

最新推荐文章于 2023-05-16 21:14:27 发布

阅读量2k

点赞数

分类专栏：大数据数据分析可视化

本文链接：https://blog.csdn.net/tandelin/article/details/100576780

版权

数据分析同时被 3 个专栏收录

81 篇文章 2 订阅

订阅专栏

可视化

33 篇文章 2 订阅

订阅专栏

大数据

6 篇文章 0 订阅

订阅专栏

研究思路

1.引用：Echarts是百度开源的可视化产品，以国外zrender开源的javascript的可视化插件包为基础，加工整理成新的图形js包，新的js包对应不同的数据图形。

2.目的：一份新的数据放置后台（需特定的数据结构），前端需要将数据进行可视化的展示。

3.方法：html脚本，结合开源的可视化js的图形包进行调用，再结合数据读取的插件包，将数据的读取制作成通用性的数据读取脚本。

环境准备

Tomcat+jsp+js,产生脚本如下:
在这里插入图片描述

其中，jquery-1.8.2.min.js和project.min.js是固定的程序包，可进行相应的下载。数据内容情况如下：（以类json的格式进行）
在这里插入图片描述

构建脚本内容

其中View.html脚本内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可视化</title>
    <!-- 引入 echarts.js -->
    <script src="project.min.js"></script>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
            // f();
        // function f() {
        //     var myChart = echarts.init(document.getElementById('main'));
        //     // 指定图表的配置项和数据
        //     debugger;
        //     $.getJSON("try.txt", function (data){
        //         console.log(data);
        //         myChart.setOption(data);
        //     });
        // }
        $(function () {
            var myChart = echarts.init(document.getElementById('main'));

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "data.txt",
                success: function (result) {
                    var project;
                    var kk;
                    var c=[];
                    var b=[];
                    for(var i in result){
                        project=result[i].name;
                        c[i]=project;
                        b[i]=result[i].sex;
                        }
                    var option = {
                        title: {
                            text: '各科室周内手术情况统计'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            data:c
                        },
                        yAxis: {},
                        series: [{
                            name: '人数',
                            type: 'bar',
                            data: b
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        });
    </script>

</body>
</html>

产生结果

在这里插入图片描述

其它可构建的Echarts扩展

参考链接：https://www.echartsjs.com/zh/builder.html
在这里插入图片描述

dltan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态数据下的Echarts可视化平台构建

引用Echarts是百度开源的可视化产品，以国外zrender开源的javascript的可视化插件包为基础，加工整理成新的图形js包，新的js包对应不同的数据图形。实现数据的动态变化，制作成新的数据图形。
复制链接

扫一扫