Layui实现Eharts图表

前言：

SpringBoot+Layui项目中想要实现Echarts图表展示

资源下载网址：

Layui，Echarts

操作：

1. 在Layui的拓展模块 lay-module 目录下 新建 echarts 文件夹（名字任意） ，将下载好的Echarts源代码Js文件放入。

2.  修改Layui 全局配置文件（lay-config.js)

 配置格式：

//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
 
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})

 3. 使用（xxx.js)

参考网址：Layui 模块规范

配置格式：

//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod
  ,mod1 = layui.mod1
  ,mod2 = layui.mod2;
  
  mymod.hello('World!'); //弹出 Hello World!
});

 实例：

layui.use(['element', 'echarts', 'layer'], function () {     //如果只加载一个模块，可以不填数组。
    var $ = layui.jquery,
        echarts = layui.echarts;
    // 基于准备好的dom，初始化echarts实例
    var chart = echarts.init(document.getElementById('main1'));
    $.ajax({
        type:"post",
        url:ctx+"/books/findType",
        dataType:"json",
        success:function (obj){
            var date = new Array();
            for (var x in obj){
                date[x] = obj[x].name;
            }
            // echarts配置
            var optionBar = {
                title: {
                    text: '书籍分类统计',
                    subtext: '分类情况', //副标题
                    x: 'center' //标题居中
                },
                tooltip: {},   // 提示框组件
                legend: {   // 图例
                    orient: 'vertical', //类型垂直,默认水平
                    left: 'left', //类型区分在左 默认居中
                    data: date
                },
                series: [{
                    type: 'pie', // 饼图
                    roseType:'area',   // 圆心角相同，设置为南丁格尔图
                    radius: '60%', // 圆的大小
                    center: ['50%', '50%'], //居中
                    data: obj,
                    selectedMode:"multiple",        // 多个选中
                    selectedOffset:30           // 选中偏移量
                }]
            };
            chart.setOption(optionBar, true);

            window.onresize = function (ec) { // 监听窗口大小变化
                // console.log(ec)
                chart.resize()       // 自适应大小变化
            }
        }
    });
});