菜单 搜索
首页 前端知识 SpringBoot简单使用Echarts

SpringBoot简单使用Echarts

2024-01-24 15:01:02 前端知识 前端哥 781 487 我要收藏

Echarts可视化数据技术

一、简单使用Echarts

1、官网：Apache ECharts

下载方式：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

打开BootCDN，搜索echarts

ECharts是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

选择5.1.0版本https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js，复制script标签

 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>

2、返回官网，选择示例

3、左侧选择饼图

4、选择基础南丁格尔玫瑰图

5、拷贝左侧的js样式

 option = {
     legend: {
         top: 'bottom'
     },
     toolbox: {
         show: true,
         feature: {
             mark: { show: true },
             dataView: { show: true, readOnly: false },
             restore: { show: true },
             saveAsImage: { show: true }
         }
     },
     series: [
         {
             name: 'Nightingale Chart',
             type: 'pie',
             radius: [50, 250],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
                 borderRadius: 8
             },
             data: [
                 { value: 40, name: 'rose 1' },
                 { value: 38, name: 'rose 2' },
                 { value: 32, name: 'rose 3' },
                 { value: 30, name: 'rose 4' },
                 { value: 28, name: 'rose 5' },
                 { value: 26, name: 'rose 6' },
                 { value: 22, name: 'rose 7' },
                 { value: 18, name: 'rose 8' }
             ]
         }
     ]
 };

6、新建一个html文件

 <!DOCTYPE html>
 <html lang="en">
 ​
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
 ​
     <body>
         <div id="pie" style="width:1000px; height: 800px;"></div>
     </body>
 ​
 </html>

定义一个div容器，用于存放图表

将复制好的script放到body标签里面

 <!DOCTYPE html>
 <html lang="en">
 ​
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
 ​
     <body>
         <div id="pie" style="width:1000px; height: 800px;"></div>
 ​
         <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
     </body>
 ​
 </html>

将饼状图的js样式复制到body里面，使用script标签

 
<!DOCTYPE html>
     <html lang="en">
 ​
         <head>
         <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>Document</title>
 </head>
 ​
 <body>
                 <div id="pie" style="width:1000px; height: 800px;"></div>
 ​
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
 <script>
     option = {
     legend: {
         top: 'bottom'
     },
     toolbox: {
         show: true,
         feature: {
             mark: { show: true },
             dataView: { show: true, readOnly: false },
             restore: { show: true },
             saveAsImage: { show: true }
         }
     },
     series: [
         {
             name: 'Nightingale Chart',
             type: 'pie',
             radius: [50, 250],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
                 borderRadius: 8
             },
             data: [
                 { value: 40, name: 'rose 1' },
                 { value: 38, name: 'rose 2' },
                 { value: 32, name: 'rose 3' },
                 { value: 30, name: 'rose 4' },
                 { value: 28, name: 'rose 5' },
                 { value: 26, name: 'rose 6' },
                 { value: 22, name: 'rose 7' },
                 { value: 18, name: 'rose 8' }
             ]
         }
     ]
 };
 </script>
 </body>
 </html>

对容器进行初始化

 // 获取页面容器
 var chartDom = document.getElementById('pie');
 // 容器初始化初始化（echarts）
 var myChart = echarts.init(chartDom);
 // 设置容器的相关配置项
 myChart.setOption(option);
 <!DOCTYPE html>
 <html lang="en">
 ​
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
 ​
     <body>
         <div id="pie" style="width:1000px; height: 800px;"></div>
 ​
         <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
         <script>
             option = {
                 legend: {
                     top: 'bottom'
                 },
                 toolbox: {
                     show: true,
                     feature: {
                         mark: { show: true },
                         dataView: { show: true, readOnly: false },
                         restore: { show: true },
                         saveAsImage: { show: true }
                     }
                 },
                 series: [
                     {
                         name: 'Nightingale Chart',
                         type: 'pie',
                         radius: [50, 250],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         itemStyle: {
                             borderRadius: 8
                         },
                         data: [
                             { value: 40, name: 'rose 1' },
                             { value: 38, name: 'rose 2' },
                             { value: 32, name: 'rose 3' },
                             { value: 30, name: 'rose 4' },
                             { value: 28, name: 'rose 5' },
                             { value: 26, name: 'rose 6' },
                             { value: 22, name: 'rose 7' },
                             { value: 18, name: 'rose 8' }
                         ]
                     }
                 ]
             };
 ​
 ​
             // 获取页面容器
             var chartDom = document.getElementById('pie');
             // 容器初始化初始化（echarts）
             var myChart = echarts.init(chartDom);
             // 设置容器的相关配置项
             myChart.setOption(option);
         </script>
     </body>
 ​
 </html>

这里使用的都是静态数据

VSCode使用快捷键Alt+B打开浏览器

效果如下：

二、Echarts动态数据Demo

环境搭建：

将数据库echarts.sql文件，使用navicat运行

文件名：echarts.sql

 
SET NAMES utf8mb4;
 SET FOREIGN_KEY_CHECKS = 0;
 ​
 -- ----------------------------
 -- Table structure for echarts
 -- ----------------------------
 DROP TABLE IF EXISTS `echarts`;
 CREATE TABLE `echarts`  (
   `id` bigint(20) NOT NULL,
   `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL,
   `count` int(11) NULL DEFAULT NULL,
   `date` datetime(0) NULL DEFAULT NULL,
   PRIMARY KEY (`id`) USING BTREE
 ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;
 ​
 -- ----------------------------
 -- Records of echarts
 -- ----------------------------
 INSERT INTO `echarts` VALUES (1, '搜索引擎', 158, '2021-05-10 16:38:55');
 INSERT INTO `echarts` VALUES (2, '直接访问', 289, '2021-05-11 16:38:55');
 INSERT INTO `echarts` VALUES (3, '邮件营销', 384, '2021-05-12 16:38:55');
 INSERT INTO `echarts` VALUES (4, '联盟广告', 520, '2021-05-13 16:38:55');
 INSERT INTO `echarts` VALUES (5, '视频广告', 674, '2021-05-14 16:38:55');
 ​
 SET FOREIGN_KEY_CHECKS = 1;

配置pom.xml文件

 <!--SpringBoot-->
 <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
     <version>2.1.0.RELEASE</version>
 </parent>
 ​
 <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
     <java.version>1.8</java.version>
     <mybatis-plus.version>3.2.0</mybatis-plus.version>
 </properties>
 ​
 <dependencies>
 ​
     <!--添加SpringMvc依赖-->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
     </dependency>
 ​
     <!-- mybatis-plus -->
     <dependency>
         <groupId>com.baomidou</groupId>
         <artifactId>mybatis-plus-boot-starter</artifactId>
         <version>${mybatis-plus.version}</version>
     </dependency>
 ​
     <dependency>
         <groupId>com.baomidou</groupId>
         <artifactId>mybatis-plus-generator</artifactId>
         <version>${mybatis-plus.version}</version>
     </dependency>
 ​
     <!-- 数据连接池 druid-->
     <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>druid</artifactId>
         <version>1.2.2</version>
     </dependency>
 ​
     <!--mysql：连接数据库-->
     <dependency>
         <groupId>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
     </dependency>
 ​
     <dependency>
         <groupId>cn.hutool</groupId>
         <artifactId>hutool-all</artifactId>
         <version>5.5.4</version>
     </dependency>
 ​
     <!--注解插件支持-->
     <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
     </dependency>
 ​
     <!--开启热部署-->
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-devtools</artifactId>
         <optional>true</optional>
     </dependency>
 </dependencies>
 ​
 <build>
     <plugins>
         <plugin>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-maven-plugin</artifactId>
             <configuration>
                 <fork>true</fork>
             </configuration>
         </plugin>
     </plugins>
 </build>
 ​
 <!--配置远程仓库-->
 <repositories>
     <repository>
         <id>public</id>
         <name>aliyun nexus</name>
         <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
         <releases>
             <enabled>true</enabled>
         </releases>
     </repository>
 </repositories>
 ​
 <!--插件依赖-->
 <pluginRepositories>
     <pluginRepository>
         <id>public</id>
         <name>aliyun nexus</name>
         <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
         <releases>
             <enabled>true</enabled>
         </releases>
         <snapshots>
             <enabled>false</enabled>
         </snapshots>
     </pluginRepository>
 </pluginRepositories>

配置application.yml

 server:
   # 配置访问端口号
   port: 1234
 spring:
   #  配置数据源
   datasource:
     driver-class-name: com.mysql.cj.jdbc.Driver
     #  用户名和密码
     username: root
     password: 111111
     #  配置访问的url 数据库名
     url: jdbc:mysql://localhost:3306/echarts?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT+8
     type: com.alibaba.druid.pool.DruidDataSource
 ​
   #开启热部署
   devtools:
     remote:
       restart:
         enabled: true
     #    设置重启目录
     restart:
       additional-paths: src/main/java
 ​
 # 配置日志
 logging:
   level:
     com:
       example:
         debug

项目的目录结构

实体类 Echarts

package com.example.entity;
 ​
 import com.baomidou.mybatisplus.annotation.IdType;
 import com.baomidou.mybatisplus.annotation.TableId;
 import com.baomidou.mybatisplus.annotation.TableName;
 import com.fasterxml.jackson.annotation.JsonFormat;
 import lombok.Data;
 ​
 import java.util.Date;
 ​
 @SuppressWarnings({"all"})
 ​
 /**
  * echart实体类
  */
 @Data
 //对应数据库表名
 @TableName("echarts")
 public class Echarts {
 ​
     //设置主键自增
     @TableId(value = "id", type = IdType.AUTO)
     private Long id;
     private String name;
     private Integer count;
     //配置日期数据装换格式
     @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
     private Date date;
 }

Mapper

package com.example.mapper;
 ​
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.example.entity.Echarts;
 ​
 @SuppressWarnings({"all"})
 public interface EchartsMapper extends BaseMapper<Echarts> {
 ​
 }

Controller

package com.example.controller;
 ​
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.example.mapper.EchartsMapper;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 ​
 import javax.annotation.Resource;
 ​
 @SuppressWarnings({"all"})
 @RestController
 @RequestMapping("/echarts")
 public class EchartsController {
 ​
     @Resource
     private EchartsMapper echartsMapper;
 ​
     @GetMapping
     public Object echarts() {
         //使用MyBatisPlus提供的API
         // 查询数据库 echarts表的所有数据
         return echartsMapper.selectList(Wrappers.lambdaQuery());
     }
 }

启动器

 package com.example;
 ​
 import org.mybatis.spring.annotation.MapperScan;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 ​
 ​
 @MapperScan("com/example/mapper")
 @SpringBootApplication
 public class HelloApplication {//启动类
 ​
     public static void main(String[] args) {
         SpringApplication.run(HelloApplication.class, args);
         System.out.println("页面的访问地址：http://localhost:1234/");
     }
 }

index.html

<!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
 ​
 <!--饼图-->
 <div id="pie" style="width:1000px; height: 800px;"></div>
 ​
 <div style="height: 200px"></div>
 <!--折线图-->
 <div id="line" style="width:1000px; height: 800px;"></div>
 ​
 <div style="height: 200px"></div>
 <!--柱状图-->
 <div id="bar" style="width:1000px; height: 800px;"></div>
 ​
 ​
 <!--使用CDN引入Echarts.js库-->
 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
 <script>
     //饼图实现
     const option = {
         // 标题
         title: {
             text: '饼图示例',
             subtext: 'Hello World',
             // left: 'center'//居中
             left: 'left'
         },
         legend: {
             top: 'bottom'
         },
         tooltip: {
             trigger: 'item'
         },
         toolbox: {
             show: true,
             feature: {
                 mark: {show: true},
                 dataView: {show: true, readOnly: false},
                 restore: {show: true},
                 saveAsImage: {show: true}
             }
         },
         series: [
             {
                 name: '面积模式',
                 type: 'pie',
                 radius: [50, 250],
                 center: ['50%', '50%'],
                 roseType: 'area',
                 itemStyle: {
                     borderRadius: 8
                 },
                 data: []
             }
         ]
     };
 ​
     // 折线图实现
     lineOption = {
         title: {
             text: '折线图示例',
             subtext: 'Hello World',
             left: 'left'
         },
         legend: {
             top: 'top'
         },
         xAxis: {
             type: 'category',
             data: []
         },
         yAxis: {
             type: 'value'
         },
         series: [{
             name: '11',
             data: [],
             type: 'line'
         },
             {
                 name: '22',
                 data: [111, 400, 100, 700, 540],
                 type: 'line'
             }
         ]
     };
 ​
     //柱状图实现
     barOption = {
         title: {
             text: '柱状图示例',
             subtext: 'Hello World',
             left: 'left'
         },
         legend: {
             top: 'top'
         },
         xAxis: {
             type: 'category',
             data: []
         },
         yAxis: {
             type: 'value'
         },
         series: [{
             name: '11',
             data: [],
             type: 'bar'
         },
             {
                 name: '22',
                 data: [111, 400, 100, 700, 540],
                 type: 'bar'
             }
         ]
     };
 ​
     // 获取页面容器
     var chartDom = document.getElementById('pie');
     // 容器初始化初始化（echarts）
     var myChart = echarts.init(chartDom);
 ​
     var lineDom = document.getElementById('line');
     var lineChart = echarts.init(lineDom);
 ​
 ​
     var barDom = document.getElementById('bar');
     var barChart = echarts.init(barDom);
 ​
 ​
     fetch("/echarts").then(response => response.json()).then(res => {
 ​
         //折线图数据获取
         //x轴
         const date = res.map(v => v.date)
         console.log(date)
         lineOption.xAxis.data = date
         //y轴
         const count = res.map(v => v.count);
         console.log(count)
         lineOption.series[0].data = count
         lineChart.setOption(lineOption);
 ​
 ​
         //柱状图数据获取
         console.log(date)
         barOption.xAxis.data = date
         console.log(count)
         barOption.series[0].data = count
         barChart.setOption(barOption);
 ​
         //饼图数据获取
         res.forEach(item => {
             option.series[0].data.push({name: item.name, value: item.count})
         })
         console.log(option)
         // 设置容器的相关配置项
         myChart.setOption(option);
     })
 ​
 ​
 </script>
 </body>
 ​
 </html>

运行项目

转载请注明出处或者链接地址：https://www.qianduange.cn//article/231.html
标签
echartsjavascriptspring boot后端
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

印度电影《凶心人在宝莱坞》的主要内容

2024-02-03 01:02:03

印度电影《未知死亡》的主要内容

2024-02-03 01:02:48

未知死亡的详细内容

2024-02-03 01:02:58

丝绸之路与洛阳的5个交汇处

2024-02-03 01:02:32

JSON文件中的数据渲染到页面（jquery）

2024-02-02 09:02:26

js/jquery之input 复选框checkbox、单选按钮radio选中判断

2024-02-02 09:02:26

jQuery实现3D轮播图

2024-02-02 09:02:25

jquery中ajax总结

2024-02-02 09:02:25

jQuery的toggle方法使用指南

2024-02-02 09:02:25

解决jQuery跨域问题的方法

2024-02-02 09:02:24

大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
7

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
8

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
9

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987
10

前端大屏适配几种方案

2024-01-29 13:01:44987

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！