javaweb项目引入echarts图表

目录

一、echarts介绍

二、学习资源

三、应用实例

1、下载

2、引入echarts.js文件

3、制作第一个echarts图表

4、从后台获取数据

---

一、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

​

    
    
    
    

​

    
    

    
    
    

​

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)