前端统计图 echarts 实现简单柱状图

时间:2019-03-12
本文章向大家介绍前端统计图 echarts 实现简单柱状图，主要包括前端统计图 echarts 实现简单柱状图使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

前端统计图   echarts实现简单柱状图

 1. 引入 ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>

2. 绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

这样你的第一个图表就诞生了！



案列：

前端代码：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>高句丽介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <style lang="css">
        td {
            align: center;
            valign: middle;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h4>资源数量统计表</h4>
                </div>
                <div class="ibox-content">
                    <table border="1" cellspacing="0" style="height: 200px;width: 100%;font-size: 0.5em" >
                        <thead>
                        <tr>
                            <td>类型</td>
                            <td>总数</td>
                           <!-- <td>已发布</td>
                            <td>未发布</td>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="a : ${list}">
                            <td th:text="${a.type}"></td>
                            <td th:text="${a.total}"></td>
                            <!--<td th:text="${a.publish}"></td>
                            <td th:text="${a.notPublish}"></td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <div class="col-sm-12">

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h4>资源数量统计图</h4>
            </div>
            <div class="ibox-content">
                <div id="bar" style="height: 200px;width: 100%"></div>

            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- echart-->
<script th:src="@{/ajax/libs/echarts/echarts.common.min.js}"></script>

<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));
    var list = [[${list}]];

    var legendDate = [];
    var total = [];
    //var notPublish = [];
    for (var i = 0; i < list.length; i++) {
        legendDate.push(list[i].type)
        total.push(list[i].total)
       // notPublish.push(list[i].notPublish)
    }
    console.log(legendDate);


    // 指定图表的配置项和数据
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: '总数'
        },
        grid: {
            left: '2%',
            right: '3%',
            bottom: '2%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: legendDate,
            textStyle: {
                color: '#c3dbff',  //更改坐标轴文字颜色
                fontSize : 30    //更改坐标轴文字大小
            },
            axisLabel: {//x轴文字垂直显示
                interval: 0,
                formatter:function(value)
                {
                    return value.split("").join("\n");
                }
            }
//            axisTick: {
//                alignWithLabel: true
//            }
        }],
        yAxis: {
            type: 'value'


        },
        series: [
            {
                name: '资源总量',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: total
            }/*,
            {
                name: '未发布',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: notPublish
            }*/
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
后台代码：


package cn.cmodes.project.module.statistics;

import cn.cmodes.project.module.articleResource.service.IArticleResourceService;
import cn.cmodes.project.module.articleinformation.service.IArticleinformationService;
import cn.cmodes.project.module.bookResource.service.IBookResourceService;
import cn.cmodes.project.module.bookinformation.service.IBookinformationService;
import cn.cmodes.project.module.mediaphoto.service.IMediaphotoService;
import cn.cmodes.project.module.resource.service.IResourceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.HashMap;

/**
 * 统计分析
 * @author : di
 * @date : 2018-11-28 15:53
 */
@Controller
@RequestMapping("/module/statistics")
public class statisticsController {

    @Autowired
    private IBookResourceService bookResourceService;
    @Autowired
    private IArticleResourceService articleResourceService;
    @Autowired
    private IResourceService resourceService;
    @Autowired
    private IArticleinformationService iArticleinformationService;
    @Autowired
    private IBookinformationService iBookinformationService;
    @Autowired
    private IMediaphotoService iMediaphotoService;
    @GetMapping()
    public String statistics(ModelMap mmap) {
        ArrayList<Object> result = new ArrayList<>();
        HashMap<String, Object> audio = new HashMap<>();
        audio.put("type","音频");
        audio.put("total",iMediaphotoService.selectTypeTatal(1));
        result.add(audio);
        HashMap<String, Object> map = new HashMap<>();
        map.put("type","地图");
        map.put("total",iMediaphotoService.selectTypeTatal(2));
        result.add(map);
        HashMap<String, Object> picture = new HashMap<>();
        picture.put("type","图片");
        picture.put("total",iMediaphotoService.selectTypeTatal(3));
        result.add(picture);
        HashMap<String, Object> video = new HashMap<>();
        video.put("type","视频");
        video.put("total",iMediaphotoService.selectTypeTatal(4));
        result.add(video);

        HashMap<String, Object> archaeologicaldata = new HashMap<>();
        archaeologicaldata.put("type","考古资料");
        archaeologicaldata.put("total",iArticleinformationService.selectTypeTatal(1));
        result.add(archaeologicaldata);

        HashMap<String, Object> archaeology = new HashMap<>();
        archaeology.put("type","考古简报");
        archaeology.put("total",iArticleinformationService.selectTypeTatal(2));
        result.add(archaeology);

        HashMap<String, Object> conference = new HashMap<>();
        conference.put("type","会议论文");
        conference.put("total",iArticleinformationService.selectTypeTatal(3));
        result.add(conference);

        HashMap<String, Object> dissertation = new HashMap<>();
        dissertation.put("type","学术论文");
        dissertation.put("total",iArticleinformationService.selectTypeTatal(4));
        result.add(dissertation);

        HashMap<String, Object> journalarticles = new HashMap<>();
        journalarticles.put("type","期刊论文");
        journalarticles.put("total",iArticleinformationService.selectTypeTatal(5));
        result.add(journalarticles);

        HashMap<String, Object> mediaarticles = new HashMap<>();
        mediaarticles.put("type","媒体文章");
        mediaarticles.put("total",iArticleinformationService.selectTypeTatal(6));
        result.add(mediaarticles);

        HashMap<String, Object> periodical = new HashMap<>();
        periodical.put("type","期刊");
        periodical.put("total",iArticleinformationService.selectTypeTatal(7));
        result.add(periodical);

        HashMap<String, Object> rubbingrubbings = new HashMap<>();
        rubbingrubbings.put("type","石刻拓片");
        rubbingrubbings.put("total",iArticleinformationService.selectTypeTatal(8));
        result.add(rubbingrubbings);

        HashMap<String, Object> stoneinscription = new HashMap<>();
        stoneinscription.put("type","石刻专题");
        stoneinscription.put("total",iArticleinformationService.selectTypeTatal(9));
        result.add(stoneinscription);


        HashMap<String, Object> ancientWorks = new HashMap<>();
        ancientWorks.put("type","古籍");
        ancientWorks.put("total",iBookinformationService.selectTypeTatal(10));
        result.add(ancientWorks);

        HashMap<String, Object> book = new HashMap<>();
        book.put("type","图书");
        book.put("total",iBookinformationService.selectTypeTatal(11));
        result.add(book);

        HashMap<String, Object> catalog = new HashMap<>();
        catalog.put("type","目录");
        catalog.put("total",iBookinformationService.selectTypeTatal(12));
        result.add(catalog);

        HashMap<String, Object> itemreport = new HashMap<>();
        itemreport.put("type","结项报告");
        itemreport.put("total",iBookinformationService.selectTypeTatal(13));
        result.add(itemreport);

        HashMap<String, Object> proceedings = new HashMap<>();
        proceedings.put("type","论文集");
        proceedings.put("total",iBookinformationService.selectTypeTatal(14));
        result.add(proceedings);

        HashMap<String, Object> stonealbum = new HashMap<>();
        stonealbum.put("type","石刻专题");
        stonealbum.put("total",iBookinformationService.selectTypeTatal(15));
        result.add(stonealbum);

        HashMap<String, Object> stonecompilation = new HashMap<>();
        stonecompilation.put("type","石刻汇编");
        stonecompilation.put("total",iBookinformationService.selectTypeTatal(16));
        result.add(stonecompilation);

        mmap.put("list",result);
        return "module/statistics/statistics";
    }
}

浏览器效果：

官方网址
随机文章
WEB前端知识点必读
最近更新