Echarts做简单的柱状图

最新推荐文章于 2024-04-22 20:30:51 发布

Mellisazhang

最新推荐文章于 2024-04-22 20:30:51 发布

阅读量322

点赞数

分类专栏： Echarts制作简单的柱状图文章标签： javascript

本文链接：https://blog.csdn.net/Mellisazhang/article/details/106155024

版权

Echarts制作简单的柱状图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE link PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
    <meta charset="utf-8">
    <title>访客统计 图表</title>
</head>


<body style="padding-top:20px; padding-left:20px;">
<!--专业列表-->
<div class="column_block width100">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this"><a href="${ctx}html/count/visitor/countMap.jsp">柱状图</a></li>
            <li><a href="${ctx}html/count/visitor/countTable.jsp">统计表</a></li>
        </ul>
        <div class="layui-tab-content">
            <%--（1）访客-车辆--%>
            <div class="layui-tab-item layui-show">
                <%-- <h2>各单位人员车辆访问统计</h2>--%>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="container" style="height: 100%"></div>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
                <script type="text/javascript"
                        src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
                <script type="text/javascript"
                        src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
                <script type="text/javascript"
                        src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
                <script type="text/javascript"
                        src="https://api.map.baidu.com/api?v=2.0&ak=OTtmdyPyGw0nP9PeWtq642TVyRCSa1U4"></script>
                <script type="text/javascript"
                        src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
                <script type="text/javascript">


                    ///这里定义一个数组对象且设置两组数据
                    //后期这里可以改成动态的数据
                    var dataArr = new Array();
                    var visitorUnitArr=[];//单位
                    var sumPersonArr = [];//人的数量
                    var sumVehicleArr = [];//车的数量
                    $.ajax({
                        url: '${ctx}visitorCount/queryVisitorCountList.html',
                        dataType: 'json',
                        data: 'post',
                        success: function (data) {
                            console.log(data.data)
                            $.each(data.data, function (i, item) {
                                visitorUnitArr.push(item.visitorUnit);
                                sumPersonArr.push(item.sumPerson);
                                sumVehicleArr.push(item.sumVehicle);

                            });
                            dataArr.push(sumPersonArr);
                            dataArr.push(sumVehicleArr);
                            dataArr.push(visitorUnitArr);

                            setData();

                        }
                    })
                    function setData(){
                        //加载图表
                        //下面两句 基于准备好的dom，初始化echarts实例
                        var dom = document.getElementById("container");
                        var myChart = echarts.init(dom);

                        //指定图表的配置项和数据
                        option = null;
                        option = {
                            title: {
                                //柱状图标题
                                text: '各单位人员车辆访问统计'
                            },
                            legend: {},
                            tooltip: {},
                            /*dataset: {
                                source: [
                                    ['product', '人员', '车辆'],
                                    ['a', 43.3, 85.8],
                                    ['Milk Tea', 83.1, 73.4],
                                    ['Cheese Cocoa', 86.4, 65.2],
                                    ['Walnut Brownie', 72.4, 53.9]
                                ]
                            },*/
                            xAxis: {
                                    name:'单位',
                                    type: 'category',
                                    data:dataArr[2]
                            },
                            yAxis: {
                                     name:'访问次数',
                            },
                            // Declare several bar series, each will be mapped
                            // to a column of dataset.source by default.
                            series: [
                                {
                                    name: '人员',
                                    type: 'bar',
                                    data: dataArr[0]
                                },
                                {
                                    name: '车辆',
                                    type: 'bar',
                                    data: dataArr[1]
                                }
                            ]
                        };
                        //使用刚指定的配置项和数据显示图表
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                    }


                </script>


            </div>


        </div>


    </div>
</div>
</body>


</html>

 - List item

Mellisazhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts做简单的柱状图

效果图<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %><%@ include file="/common/taglibs.jsp" %><!DOCTYPE link PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">&l
复制链接

扫一扫