javaweb项目引入echarts图表

早睡第一人

已于 2023-07-19 16:31:38 修改

阅读量1.5k

点赞数 3

文章标签： echarts javascript ecmascript

于 2023-04-30 01:13:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50863323/article/details/130445614

版权

一、echarts介绍

在很多网站中都应用了echarts图表，最典型的就是疫情看板

通俗的理解：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】

二、学习资源

echarts官网——Apache ECharts（图表比较基础）

组件社区——数据可视化技术分享-echarts热门组件 - Powered by Discuz! （图表更加丰富）

黑马pink老师数据可视化教程—— JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续哔哩哔哩bilibili （适合系统学习，从P443开始）

三、应用实例

1、下载

打开官网——》点击首页上的快速入门——》echarts CDN by jsDelivr - A CDN for npm and GitHub下载——》选择dist目录下echarts.js文件

2、引入echarts.js文件

先准备一个echarts02.html文件——》准备一个DOM容器——》引入上一步骤下载好的echarts.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    
    
</body>

</html>

3、制作第一个echarts图表

打开官网——》点击所有事例——》根据需要选择饼图——》点击第一个第一个饼图——》选择完整代码——》复制到echarts代码到echarts01.html——》运行

4、从后台获取数据

jsp页面：

在登陆的servlet层LoginServlet里，把需要的数据存进session里，（注意：session里不能放太多数据，建议以后学习了其他方法之后使用其他方法），在Jsp页面中都可以使用session里的数据。

json：

echarts.init(document.getElementById('main')).setOption(option)

这里的option表示使用json数据格式的配置来绘制图表

详情见 ECharts 配置语法 | 菜鸟教程 (runoob.com)