JS学习 | echarts图表学习

JSP与ECharts实战

最新推荐文章于 2025-03-23 00:59:27 发布

cungudafa

最新推荐文章于 2025-03-23 00:59:27 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： echartsx轴显示不全 echarts数据处理 JSP格式

本文链接：https://blog.youkuaiyun.com/cungudafa/article/details/88421283

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍JSP页面构成及ECharts图表库的使用方法，包括JSP标签、内容、位置等基础知识，以及如何利用ECharts和amcharts库创建个性化表格样式。通过实例演示，从引入库文件、设置容器到数据处理，帮助读者掌握在JSP上绘制动态图表的全过程。

一、Jsp构成

标签	内容	位置
meta	针对搜索引擎和更新频度的描述和关键	必须放在最前面
script	引用网上或系统中的样式js文件	必须写在head后body前
script	自定义函数	可以写在.java文件，还可以写在body里
style	按id名称自定义布局格式	也可以单独写在css文件中，还可以写在body里
div	HTML内容	body里

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta标签*必须*放在最前面：针对搜索引擎和更新频度的描述和关键 -->
<title>Insert title here</title>
</head>
<!-- Resources：1、script引用网上或系统中的样式js文件，必须写在head后body前 -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<!--2、script自定义函数，还可以写在body里 -->
<script type="text/javascript">
$(function () {
	     $('#btn1').hide();
})
<!-- 3、style：按id名称自定义布局格式，也可以单独写在css文件中，还可以写在body里 -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>
<body>
<!-- HTML：内容 -->
<div id="chartdiv"></div>
</body>
</html>

二、了解什么是表格库

常用的2个表格库：表格库有样式文件option，

1、百度echarts库
在这里插入图片描述
2、amcharts库

三、创建表格样式

如何使用？
对，点这里照着做一遍：echarts库官方使用教程，你就理解如何三步在jsp上绘出基本表格

引入echarts库<script>，要下载js文件到你的项目中
放置一个容器<div>,
在自定义布局中添加你的表格样式了：

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
    ...
    }
</script>