layui 使用 echarts

layui项目，需要展现图表相关功能，官网默认使用的echarts图表库，但是免费下载的组件中，并不包含echarts组件，我们需要自己扩展组件。

去echarts下载 echarts.js，链接：

https://echarts.apache.org/handbook/zh/get-started/

1.新建一个demo.html，并引入layui和echarts.js，如下图

引入layui包：

<link rel="stylesheet" href="layui/css/layui.css?v=1">
<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>

定义一个容器存放图表需要指定这个容器的大小

<!-- 为 ECharts 准备一个定义了宽高的 DOM，必须定义宽高才可以显示 -->
<div style="width: 100%;height: 300px;" id="shopping"></div>

2.Echart 作为layui的内部组件使用需要配置配置后才可以使用

layui.config({version: 1,base: './echarts/' //这个就是你放echarts.js的目录
}).use(['element', 'echarts'], function() {});

3.echarts.js 也需要配置

原头部为：

修改为：

(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :typeof define === 'function' && define.amd ? define(['exports'], factory) :window.layui && layui.define ? layui.define(function(exports){exports('echarts',factory(exports))}) :(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';

最下面尾部还需要加上 return exports;

否则在引用的时候会报错：Uncaught TypeError: Cannot read property 'init' of undefined

4.layui中使用：

<script type="text/javascript">layui.config({version: 1,base: 'echarts/' //这个就是你放Echart.js的目录}).use(['element', 'echarts', 'carousel'], function () {var element = layui.element,$ = layui.jquery,carousel = layui.carousel,echarts = layui.echarts;var shopping = echarts.init(document.getElementById('shopping'));// 指定图表的配置项和数据var optionShopping = {title: {text: '商品订单'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {type: 'value'},series: [{name: '销量',type: 'bar',//柱状data: [5, 20, 36, 10, 10, 20],itemStyle: {normal: {//柱子颜色color: '#4ad2ff'}}}]};// 使用刚指定的配置项和数据显示图表。shopping.setOption(optionShopping);});</script>

5.效果

layui 使用 echarts相关推荐

基于javaweb的药品管理系统(java+springboot+html+layui+bootstrap+echarts+mysql)
基于javaweb的药品管理系统(java+springboot+html+layui+bootstrap+echarts+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 ecli ...
layui 引入echarts图表插件
前言本篇文章不是基于layui-admin官方后台模板,如果使用官方后台模板的可作参考. echart.js下载 1.修改echarts.js 注:引入前需要修改echarts.js文件,否则无法引 ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
LayUI使用Echarts实现统计图
引入 echarts.min.js包 <div id="main" style="width: 1000px;height:700px;">< ...
Java项目:药品管理系统(java+SpringBoot+html+layui+bootstrap+echarts+mysql)
源码获取:博客首页 "资源" 里下载! 项目介绍本项目属于前后端分离的项目,分为两个角色药品管理员和取药处人员药品管理员: 登录.退出.药品信息录入.药厂信息录入.采购员信息录 ...
Layui的轮播事件和echarts插件事件
开发工具与关键技术:VS layui和 echarts 作者:沈金凤年级:18级(4)班撰写日期:2019年5月03日一.在layui中主要适用于跑马灯/轮播等交互场景,layui它并非单纯地为 ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
SpringBoot+LayUI+MybatisPlus 前后端分离实现排名统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
Java项目：基于Servlet+Mybatis+Layui的CRM客户关系管理系统
作者主页:夜未央5788 简介:Java领域优质创作者.Java项目.学习资料.技术互助文末获取源码功能介绍该项目未使用spring框架,实现了用户登录,权限控制,数据统计,以及市场活动.线索. ...

layui 使用 echarts

layui 使用 echarts相关推荐

最新文章

热门文章