网站首页   文章专栏   ECharts简单的运行示列
ECharts简单的运行示列
原创 2020-02-17 21:37 ApeNixX 114浏览 Web插件

因为最近正好用到了这个Echarts 所有做下记录

首先自己官网下载js(echarts.min.js)
1、使用填充的数据
页面代码如下:
 <!-- 引入echarts的js -->
<script th:src="@{/js/echarts.min.js}"></script>

<!-- 为ECharts准备一个具备大小(宽高)的Dom盒子/容器 -->
<div id="main" style="width: 1500px; height: 1000px;"></div>

$(function () {
    $.ajax({
        method: 'post',
        url: '/admin/getHistorical******',
        success: function (data) {
            var chart = echarts.init(document.getElementById("viewChart"));
            var option = {
                title: {
                    text: '历史访客量'
                },
                tooltip: {},
                legend: {
                    data:['浏览量']
                },
                xAxis: {
                    data: data.times,
                    axisLabel: {
                        interval:0,
                        rotate:0
                    }
                },
                yAxis: {},
                series: [{
                    name: '浏览量',
                    type: 'line',
                    data: data.views
                }]
            };
            chart.setOption(option)
        }
    });
})
2、接着访问数据库
后台代码如下:Controller层部分代码
 @PostMapping("/getHistorical******")
    @ResponseBody
    public Map<String, Object> getHistoricalViews(){
        List<HistoricalViews> historicalViews = historicalViewsMapper.getHistoricalViews();
        Map<String,Object> map = new HashMap<>();
        TimeUtil timeUtil = new TimeUtil();
        //封装日期
        String [] timeArray = new String[historicalViews.size()];
        //封装人数
        int [] viewsArray = new int[historicalViews.size()];

        int i=0;

        for(HistoricalViews historicalViews1:historicalViews){
          timeArray[i] = timeUtil.getParseDateForYMD(historicalViews1.getCreateBy().toString());
          viewsArray[i] = historicalViews1.getViews();
          i++;
        }
        map.put("times",timeArray);
        map.put("views",viewsArray);

        return map;
    }

主要是将x、y轴要显示的数据从数据库拿出来,然后分别放入到一个map集合中,然后将map返回页面
效果如下

这个只是最简单的 其他可以自己加~ 感谢阅读~

版权声明:本文由ApeNixX原创出品,转载请注明出处!

本文链接:http://www.apenixx.top/article/details/1581946633


  Echarts    插件 

赞助本站,网站的发展离不开你们的支持!
来说两句吧
最新评论
  • 不落阁
    不落阁
    我为大家做了模拟留言与回复!试试吧!

    Absolutely
    Absolutely这是用户回复内容

    2017-03-18 18:26回复

    Absolutely
    Absolutely 回复 不落阁这是第二个用户回复内容

    2017-03-18 18:26回复