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()       // 自适应大小变化}}});
});

Layui实现Eharts图表相关推荐

SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
layui 引入echarts图表插件
前言本篇文章不是基于layui-admin官方后台模板,如果使用官方后台模板的可作参考. echart.js下载 1.修改echarts.js 注:引入前需要修改echarts.js文件,否则无法引 ...
SpringBoot+LayUI+MybatisPlus 前后端分离实现排名统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
flask echarts词云可视化_基于flask框架的高校舆情分析系统
系统分析: 高校舆情分析拟实现如下功能,采集微博.贴吧.学校官网的舆情信息,对这些舆情进行数据分析.情感分析,提取关键词,生成词云分析,情感分析图,实时监测舆情动态. 系统设计: 前端:采用layui ...
爬空气质量MySQL,mysql
Flask 定了2中上下文,来实现机遇线程协程的,wsgi服务的请求(request.session)和存储(g,current_app )过程,通过栈来完成不同线程和协程的上下文切换,在与celer ...
毕业设计有哪些可借鉴的 GitHub 项目？
前几天写了一篇文章:你的毕业设计是 XX 管理系统吗?阅读量挺高的,很多读者还以为是推荐几个亮眼的 GitHub 项目,发现并不是. 今天老逛推荐几个项目,毕业设计可借鉴下面这几个 GitHub 项目 ...
旅游管理系统-JAVA【数据库设计、源码、开题报告】
系统分析本章将从整体上描述系统的需求,根据需求确定了系统的整体结构和数据库设计方案,对系统各部分的功能进行了划分并描述了系统架构的设计思路.本文将详细的分析系统的续期功能的设计及实现方法. 研究背景 ...
信息管理毕业设计选题集合
文章目录 0 前言 1 毕设项目推荐 2 JavaWeb 项目 2.1 线考试系统 ( web前后端+小程序) 2.2 在线考试 2.3 外卖系统 2.4 电影院选座系统 3 移动端项目 3.1 仿美 ...
信息管理毕设新颖题目
文章目录 0 前言 1 毕设项目推荐 2 JavaWeb 项目 2.1 线考试系统 ( web前后端+小程序) 2.2 在线考试 2.3 外卖系统 2.4 电影院选座系统 3 移动端项目 3.1 仿美 ...
信息管理毕设项目推荐
文章目录 0 前言 1 毕设项目推荐 2 JavaWeb 项目 2.1 线考试系统 ( web前后端+小程序) 2.2 在线考试 2.3 外卖系统 2.4 电影院选座系统 3 移动端项目 3.1 仿美 ...

Layui实现Eharts图表

前言：

资源下载网址：

操作：

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

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

3. 使用（xxx.js)

Layui实现Eharts图表相关推荐

最新文章

热门文章

Layui实现Eharts图表

前言：

资源下载网址：

操作：

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

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

3. 使用（xxx.js)

Layui实现Eharts图表相关推荐

最新文章

热门文章

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