【数据抓取】EChart图表展示

最新推荐文章于 2024-08-04 14:35:38 发布

Francis-Leo

最新推荐文章于 2024-08-04 14:35:38 发布

阅读量1.2k

点赞数

分类专栏：【项目收获】 ………数据抓取文章标签：数据抓取 Echart 图表

本文链接：https://blog.csdn.net/Francis123580/article/details/58029161

版权

【项目收获】同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

………数据抓取

2 篇文章 0 订阅

订阅专栏

背景

当获取了数据，将数据处理成需要的格式并存入数据库之后

下一步的工作就是：分析数据，显示数据

当然分析数据是根据业务走的，用户想看数据，我们能分析出来什么，这是我们的思维逻辑

我们要做的就是把根据需求分析处理数据，并显示数据

功能

以图表形式直观的显示数据

材料

本次采用的EChart，地址 http://echarts.baidu.com
下载好对应的js文件，引用就可以直接使用

也可以采用hcharts，地址 https://www.hcharts.cn

效果展示

—

代码

<body>
    <form id="form1" runat="server">
        <div></div>
    </form>

    <%-- 图表展示区 --%>
    <div id="charts" style="margin-top:100px;">
        <div id="chart1" style="width: 600px; height: 400px; float: left;"></div>
        <div id="chart2" style="width: 600px; height: 400px; float: left;"></div>
    </div>

</body>

<script src="js/echarts.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //图表1-显示资料的使用情况
        var myChart1 = echarts.init(document.getElementById('chart1'));
        // 显示标题，图例和空的坐标轴
        myChart1.setOption({
            title: {
                text: '资料使用情况'
            },
            tooltip: {},
            legend: {
                data: ['次数']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '次数',
                type: 'bar',
                data: []
            }]
        });
        //后台获取数据，显示资料的使用情况
        $.ajax({
            url: "Material.aspx/GetMaterialInfo",
            type: 'Post',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var material = JSON.parse(data.d);
                myChart1.setOption({
                    xAxis: {
                        data: material.categories
                    },
                    series: [{
                        name: '次数',
                        data: material.data
                    }]
                });
            }
        });


        //图表2-显示个人的使用情况
        var myChart2 = echarts.init(document.getElementById('chart2'));
        // 显示标题，图例和空的坐标轴
        myChart2.setOption({
            title: {
                text: '张三-个人情况'
            },
            tooltip: {},
            legend: {
                data: ['平均水平', '用户情况']
            },
            radar: {
                indicator: [
                   { name: '数据结构', max: 30 },
                   { name: 'MySQL', max: 30 },
                   { name: 'Angular2', max: 30 },
                   { name: '设计模式', max: 30 },
                   { name: 'J2EE', max: 30 }
                ]
            },
            series: [{
                name: '平均水平 vs 用户情况',
                type: 'radar',
                data: [
                    {
                        value: [],
                        name: '平均水平'
                    },
                     {
                         value: [],
                         name: '用户情况'
                     }
                ]
            }]
        });
        //后台获取数据，设置个人雷达图的数据
        $.ajax({
            url: "Material.aspx/GetPersonalInfo",
            type: 'Post',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var personal = JSON.parse(data.d);
                myChart2.setOption({
                    series: [{
                        data: [
                            {
                                value: personal.average_data,
                                name: '平均水平'
                            },
                             {
                                 value: personal.personal_data,
                                 name: '用户情况'
                             }
                        ]
                    }]
                });
            }
        });
    });
</script>
</html>