echarts设计

最新推荐文章于 2024-05-12 14:23:18 发布

在代码中沉醉

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量150

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42394862/article/details/128747051

版权

1.使用layui 包

1.1jsp页面设计

 <div id="main1" style="height:400px"></div>

<script src="${pageContext.request.contextPath}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>

   layui.use(['layer', 'miniTab','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '每本书借阅的次数',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [ <c:forEach items="${bookCount}" var="type">'${type.name}',
                    </c:forEach> ,0]
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        <c:forEach items="${bookCount}" var="type">
                        {value:${type.jcount}, name:'${type.name}'},
                        </c:forEach>
                        ,0
                        /* { value: 335, name: '直接访问' },
                         { value: 310, name: '邮件营销' },
                         { value: 234, name: '联盟广告' },
                         { value: 135, name: '视频广告' },
                         { value: 1548, name: '搜索引擎' }*/
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。


        myChart.setOption(option1);





  });

</script>

1.2java页面设计

List<String> bookCountarrlt=new ArrayList();

import java.util.ArrayList;
import java.util.List;   


     List<BookInfo> bookCount = bookInfoService.getBookCount();
        model.addAttribute("bookCount",bookCount);
        List<String>  bookCountarrlt=new ArrayList();
        for (BookInfo b :bookCount) {
//数据导入
            bookCountarrlt.add(b.getName());
        }
        model.addAttribute("bookCountarrlt", bookCountarrlt);