layui项目-所需图表内容

最新推荐文章于 2024-08-12 17:12:18 发布

wzw_jiexika

最新推荐文章于 2024-08-12 17:12:18 发布

阅读量1.5k

点赞数

分类专栏：项目文章标签： java

本文链接：https://blog.csdn.net/wzw_jiexika/article/details/107964938

版权

这篇博客主要介绍了如何在layui项目中集成百度Echarts图表，包括从官网获取资源，快速上手，以及实体类、后台Service和持久层的实现。同时，文章还提到了项目的角色权限设置，如用户管理和图表统计仅限管理员操作。

摘要由CSDN通过智能技术生成

1. 百度图表

1.1 官网
官网: https://echarts.apache.org/zh/index.html
快速上手:
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
组件参考:https://echarts.apache.org/zh/option.html#title

1.2使用方式(已柱状图为例)
下载官网资源,引入echarts.js到工程中

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="static/layui/css/layui.css" />
</head>
<body>
<div class="layui-form" style="width: 800px;margin-left: 30%" >
 <div class="layui-form-item">
 <label class="layui-form-label">
 年份
 </label>
 <div class="layui-input-inline">
 <input class="layui-input" placeholder="年份" id="year"/>
 </div>
 <button class="layui-btn" id="searchBtn">搜索</button>
 </div>
</div>
<div>
 <!-- 2. 创建饼状图的容器 -->
 <div style="width: 800px;height:500px;margin: auto;" id="pieContent"></div>
</div>
<!-- 1. 引入js文件 -->
<script type="text/javascript" src="static/js/echarts.js"></script>
<script type="text/javascript" src="static/layui/layui.js"> </script>
<script type="text/javascript">
 //3 . 初始化echarts 对象
 var mychart = echarts.init(document.getElementById("pieContent"));

 layui.use(['laydate','jquery'],function(){
   
 var laydate