echarts图表

最新推荐文章于 2022-09-20 20:19:12 发布

一羊炖错

最新推荐文章于 2022-09-20 20:19:12 发布

阅读量611

点赞数

文章标签： java

本文链接：https://blog.csdn.net/yangyw2/article/details/109508196

版权

本文介绍了如何从Echarts官网下载所需的js文件，并在Java项目中应用。通过选择图表类型和特效，下载在线打包的js文件并放入项目中。在实际操作中，展示了前台和后台代码的配合，特别是后台返回日期、数量和总数的数据。对于多条折线图，关键在于name属性的对应。示例中强调了参考Echarts官网的详细示例进行配置。

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

echarts 官网地址https://echarts.apache.org/zh/index.html
第一件事情就是先下载echarts.js
下载步骤：
在这里插入图片描述

拉到最下面选方法三

选自己想要做的图表类型还有个各种特效然后点击下载

网站会在线打包下载一个js,放到项目里面就行了

折线图项目实操：
项目前台代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="${ctx.contextPath}/layui/commons/main.js" type="text/javascript"></script>
    <script src="${ctx.contextPath}/layui/commons/echarts.min.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div style="width: 1200px;height:60px;font-size: 15px;">
    <label class="" style="line-height:60px">企业申报总数：</label>
    <input type="text"  value="" id="totle" style="border:0;outline:none;" readonly/>
</div>
<div style="width: 1200px;height:60px;font-size: 15px;">
    <label class=""style="line-height:60px">用户总数：</label>
    <input type="text"  value="&#