程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

springboot+mybatis+echarts +mysql制作数据可视化大屏

发布于2023-06-20 21:47     阅读(847)     评论(0)     点赞(0)     收藏(4)


作者水平低,如有错误,恳请指正!谢谢!!!!!

目录

一、数据源

二、所需工具

三、项目框架搭建

3.1新建springboot项目

3.1.1进入官网

3.1.2创建项目

四、后端代码编写

4.1根据需求修改pom.xml

4.2配置数据源

4.3创建目录结构

4.4后端编写代码

4.4.1entity类

4.4.2dao

4.4.3service

4.4.4controller

4.5测试

五、前端代码编写

5.1准备

5.2创建包

 5.3代码编写

5.3.1配置静态资源访问

5.3.2在templates目录下创建HTML文件

5.4测试


成果展示:

一、数据源

1)可以使用自己的MySQL数据库

2)使用我提供的数据。(免费下载)

gmall_report用于可视化的SQL文件-MySQL文档类资源-CSDN下载

二、所需工具

MySQL

IDEA

jdk1.8

Maven

三、项目框架搭建

3.1新建springboot项目

创建springboot项目有二种方式:

1)在IDEA中创建

2)在官网上创建

我喜欢在官网创建

3.1.1进入官网

官网地址(记得收藏):

https://start.spring.io/

3.1.2创建项目

 注:

1)注意红色框框的地方,选择你想要的版本和与你的计算机相应的配置;

2)在1.处点击添加相关依赖;

3)在2.处点击生成初始代码并下载。

下面给出我的配置信息:

 项目下载后解压,然后用IDEA打开解压后的项目。

四、后端代码编写

4.1根据需求修改pom.xml

我的pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.7.1</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.example</groupId>
   <artifactId>demo</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>demo</name>
   <description>Demo project for Spring Boot</description>
   <properties>
      <java.version>1.8</java.version>
   </properties>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>

      <dependency>
         <groupId>org.mybatis.spring.boot</groupId>
         <artifactId>mybatis-spring-boot-starter</artifactId>
         <version>2.2.2</version>
      </dependency>

      <dependency>
         <groupId>com.baomidou</groupId>
         <artifactId>mybatis-plus-boot-starter</artifactId>
         <version>3.1.2</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-devtools</artifactId>
         <scope>runtime</scope>
         <optional>true</optional>
      </dependency>

      <dependency>
         <groupId>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
      </dependency>

      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <optional>true</optional>
         <version>1.18.4</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>

   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
               <excludes>
                  <exclude>
                     <groupId>org.projectlombok</groupId>
                     <artifactId>lombok</artifactId>
                  </exclude>
               </excludes>
            </configuration>
         </plugin>
      </plugins>
   </build>
1)
</project>

4.2配置数据源

1)重命名或者复制,把application.properties变为application.yml

2) 在application.yml中添加内容:

  1. spring:
  2. datasource:
  3. driver-class-name: com.mysql.cj.jdbc.Driver
  4. url: jdbc:mysql://192.168.17.XXX:3306/gmall_report?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
  5. username: root
  6. password: 123456

注:要按照实际情况修改内容。

(1)192.168.17.XXX是我的MySQL所在计算机的IP地址,要修改成你的;

(2)3306:是端口号;

(3)gmall_report是用到的数据库名;

(4)root是MySQL的用户名,123456是用户相应的密码;

4.3创建目录结构

按照下图创建你的包,使其目录和下图一样。

4.4后端编写代码

想要从MySQL中提取数据,要编写entity,dao,servier,controller类或者接口,强烈建议一张一张表的编写,方便梳理。

本文用到的表有:goods,ads_area_topic,ads_order_day_count,ads_product_sale_topN,ads_user_action_count

4.4.1entity类

在entity包下面创建java类,如下图;

(1) AreaTopicEntity

  1. import com.baomidou.mybatisplus.annotation.TableId;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import lombok.Data;
  4. import java.io.Serializable;
  5. @Data
  6. @TableName("ads_area_topic")
  7. public class AreaTopicEntity implements Serializable {
  8. private static final long serialVersionUID = 2L;
  9. @TableId
  10. private String dt;
  11. private String id;
  12. private String provinceName;
  13. private String regionName;
  14. private String orderDayAmount;
  15. private String paymentDayAmount;
  16. private String areaCode;
  17. }

 注:

1)ads_area_topic是用到的mysql表名;

2)dt ,       id,        provinceName,        regionDayAmouth,         orderDayAmount,       paymentDayAmount,        areaCode;是ads_area_topic表的列名;

(2)GoodEntity 

  1. import com.baomidou.mybatisplus.annotation.TableId;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import lombok.Data;
  4. import java.io.Serializable;
  5. @Data
  6. @TableName("goods")
  7. public class GoodEntity implements Serializable {
  8. private static final long serialVersionUID = 1L;
  9. @TableId
  10. private Long id;
  11. private String name;
  12. private Integer num;
  13. }

(3)OrderDayCountEntity

  1. import com.baomidou.mybatisplus.annotation.TableId;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import lombok.Data;
  4. import java.io.Serializable;
  5. @Data
  6. @TableName("ads_order_daycount")
  7. public class OrderDayCountEntity implements Serializable {
  8. private static final Long serialVersionUID = 1L;
  9. @TableId
  10. private String dt;
  11. private String orderCount;
  12. private String orderAmount;
  13. private String orderUsers;
  14. }

(4)ProductSaleTopNEntity

  1. import com.baomidou.mybatisplus.annotation.TableId;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import lombok.Data;
  4. import java.io.Serializable;
  5. @Data
  6. @TableName("ads_product_sale_topN")
  7. public class ProductSaleTopNEntity implements Serializable {
  8. private static final Long serialVersionUID = 1L;
  9. @TableId
  10. private String dt;
  11. private String skuId;
  12. private String paymentAmount;
  13. }

(5)UserActionCountEntity

  1. import com.baomidou.mybatisplus.annotation.TableField;
  2. import com.baomidou.mybatisplus.annotation.TableName;
  3. import lombok.Data;
  4. import javax.print.DocFlavor;
  5. import java.io.Serializable;
  6. @Data
  7. @TableName("ads_user_action_convert_day")
  8. public class UserActionCountEntity implements Serializable {
  9. private static final Long serialVersionUID = 1L;
  10. @TableField
  11. private String dt;
  12. private String homeCount;
  13. private String goodDetailCount;
  14. private String home2goodDetailConvertRatio;
  15. private String cartCount;
  16. private String goodDetail2cartConvertRatio;
  17. private String orderCount;
  18. private String cart2orderConvertRatio;
  19. private String paymentAmount;
  20. private String order2paymentConvertRatio;
  21. }

4.4.2dao

按照下图在dao包下面创建java接口文件;

 (1)AreaTopicDao

  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.demo.entity.AreaTopicEntity;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface AreaTopicDao extends BaseMapper<AreaTopicEntity> {
  6. }

(2)GoodDao

  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.demo.entity.GoodEntity;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface GoodDao extends BaseMapper<GoodEntity> {
  6. }

(3)OrderDayCountDao

  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.demo.entity.OrderDayCountEntity;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface OrderDayCountDao extends BaseMapper<OrderDayCountEntity> {
  6. }

(4)ProductSaleTopNDao

  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.demo.entity.ProductSaleTopNEntity;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface ProductSaleTopNDao extends BaseMapper<ProductSaleTopNEntity> {
  6. }

(5)UserActionCountDao

  1. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  2. import com.example.demo.entity.UserActionCountEntity;
  3. import org.apache.ibatis.annotations.Mapper;
  4. @Mapper
  5. public interface UserActionCountDao extends BaseMapper<UserActionCountEntity> {
  6. }

4.4.3service

1)在service包下创建一个impl包;

2)按照下图的布局在service和impl包下面创建java类和java接口文件

(1)AreaTopicService

  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.demo.entity.AreaTopicEntity;
  3. public interface AreaTopicService extends IService<AreaTopicEntity> {
  4. }

(1.1) AreaTopicServiceImpl

  1. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  2. import com.example.demo.dao.AreaTopicDao;
  3. import com.example.demo.entity.AreaTopicEntity;
  4. import com.example.demo.service.AreaTopicService;
  5. import org.springframework.stereotype.Service;
  6. @Service("areatopicService")
  7. public class AreaTopicServiceImpl extends ServiceImpl<AreaTopicDao, AreaTopicEntity> implements AreaTopicService {
  8. }

(2)GoodService

  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.demo.entity.GoodEntity;
  3. public interface GoodService extends IService<GoodEntity> {
  4. }

(2.1)GoodServiceImpl

  1. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  2. import com.example.demo.dao.GoodDao;
  3. import com.example.demo.entity.GoodEntity;
  4. import com.example.demo.service.GoodService;
  5. import org.springframework.stereotype.Service;
  6. @Service("goodService")
  7. public class GoodServiceImpl extends ServiceImpl<GoodDao, GoodEntity> implements GoodService {
  8. }

(3)OrderDayCountService

  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.demo.entity.OrderDayCountEntity;
  3. public interface OrderDayCountService extends IService<OrderDayCountEntity> {
  4. }

(3.1)OrderDayCountServiceImpl

  1. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  2. import com.example.demo.dao.OrderDayCountDao;
  3. import com.example.demo.entity.OrderDayCountEntity;
  4. import com.example.demo.service.OrderDayCountService;
  5. import org.springframework.stereotype.Service;
  6. @Service("orderdaycountService")
  7. public class OrderDayCountServiceImpl extends ServiceImpl<OrderDayCountDao, OrderDayCountEntity> implements OrderDayCountService {
  8. }

(4)ProductSaleTopNService

  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.demo.entity.ProductSaleTopNEntity;
  3. public interface ProductSaleTopNService extends IService<ProductSaleTopNEntity> {
  4. }

(4.1)ProductSaleTopNServiceImpl

  1. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  2. import com.example.demo.dao.ProductSaleTopNDao;
  3. import com.example.demo.entity.ProductSaleTopNEntity;
  4. import com.example.demo.service.ProductSaleTopNService;
  5. import org.springframework.stereotype.Service;
  6. @Service("productsaletopNService")
  7. public class ProductSaleTopNServiceImpl extends ServiceImpl<ProductSaleTopNDao, ProductSaleTopNEntity> implements ProductSaleTopNService {
  8. }

(5)UserActionCountService

  1. import com.baomidou.mybatisplus.extension.service.IService;
  2. import com.example.demo.entity.UserActionCountEntity;
  3. public interface UserActionCountService extends IService<UserActionCountEntity> {
  4. }

(5.1)UserActionCountServiceImpl

  1. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  2. import com.example.demo.dao.UserActionCountDao;
  3. import com.example.demo.entity.UserActionCountEntity;
  4. import com.example.demo.service.UserActionCountService;
  5. import org.springframework.stereotype.Service;
  6. @Service("useractioncountService")
  7. public class UserActionCountServiceImpl extends ServiceImpl<UserActionCountDao, UserActionCountEntity> implements UserActionCountService {
  8. }

4.4.4controller

按照下图的布局在controller包下面创建java类文件;

(1)AreaTopicController

  1. import com.example.demo.entity.AreaTopicEntity;
  2. import com.example.demo.service.AreaTopicService;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. import java.util.List;
  7. @RestController
  8. @RequestMapping("areatopic")
  9. public class AreaTopicController {
  10. @Autowired
  11. private AreaTopicService areaTopicService;
  12. @RequestMapping("list")
  13. public List<AreaTopicEntity> list(){
  14. return areaTopicService.list();
  15. }
  16. }

(2) GoodController

  1. import com.example.demo.entity.GoodEntity;
  2. import com.example.demo.service.GoodService;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. import java.util.List;
  7. @RestController
  8. @RequestMapping("goods")
  9. public class GoodController {
  10. @Autowired
  11. private GoodService goodService;
  12. @RequestMapping("list")
  13. public List<GoodEntity> list() {
  14. return goodService.list();
  15. }
  16. }

(3)OrderDayCountController

  1. import com.example.demo.entity.OrderDayCountEntity;
  2. import com.example.demo.service.OrderDayCountService;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. import java.util.List;
  7. @RestController
  8. @RequestMapping("orderdaycount")
  9. public class OrderDayCountController {
  10. @Autowired
  11. private OrderDayCountService orderdaycountService;
  12. @RequestMapping("list")
  13. public List<OrderDayCountEntity> list(){
  14. return orderdaycountService.list();
  15. }
  16. }

(4)ProductSaleTopNController

  1. import com.example.demo.entity.ProductSaleTopNEntity;
  2. import com.example.demo.service.ProductSaleTopNService;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. import java.util.List;
  7. @RestController
  8. @RequestMapping("productsaletopN")
  9. public class ProductSaleTopNController {
  10. @Autowired
  11. private ProductSaleTopNService productSaleTopNService;
  12. @RequestMapping("list")
  13. public List<ProductSaleTopNEntity> list(){
  14. return productSaleTopNService.list();
  15. }
  16. }

(5)UserActionCountController

  1. import com.example.demo.entity.UserActionCountEntity;
  2. import com.example.demo.service.UserActionCountService;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. import java.util.List;
  7. @RestController
  8. @RequestMapping("useractioncount")
  9. public class UserActionCountController {
  10. @Autowired
  11. private UserActionCountService userActionCountService;
  12. @RequestMapping("list")
  13. public List<UserActionCountEntity> list(){
  14. return userActionCountService.list();
  15. }
  16. }

4.5测试

1)点击启动项目

 2)启动成功样式

 3)进入浏览器,测试接口

  1. http://localhost:8080/areatopic/list
  2. http://localhost:8080/goods/list
  3. http://localhost:8080/orderdaycount/list
  4. http://localhost:8080/productsaletopN/list
  5. http://localhost:8080/useractioncount/list

 注:

注意查看数据,都出现数据说明上面的代码没有问题! 

如果有数据为空,先检查mysql数据库的数据有没有问题,没有问题再检查相应的entity的代码;

注意,如果数据库表的列名中有下划线,entity中下划线的后一位要用大写,不能用下划线;

比如:

id_user --------->idUser

gmall_ip_use -------------->gmallIpUse

五、前端代码编写

5.1准备

下载echarts.min.js,jquery-3.5.1.min.js.china.js

1)通过以下官网可以找到:

下载 - Apache ECharts

Download jQuery | jQuery

jquery下载所有版本(实时更新)

2)知道大家下载麻烦,我已经准备了好了,内含用到的css!免费下载哦!

echarts,jQuery文件-Javascript文档类资源-CSDN下载

5.2创建包

按照下面结构创建相应的文件和文件夹;

 5.3代码编写

5.3.1配置静态资源访问

在properties.yml中添加

  1. resources:
  2. web:
  3. resources:
  4. static-locations: classpath:/templates/, classpath:/static/

5.3.2在templates目录下创建HTML文件

k.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>柱状图</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width: 450px;height:200px;"></div>
  13. <script type="text/javascript">
  14. var chartDom = document.getElementById('main');
  15. var myChart = echarts.init(chartDom);
  16. var option;
  17. var data = [
  18. {
  19. name: 'Grandpa',
  20. children: [
  21. {
  22. name: 'Uncle Leo',
  23. value: 15,
  24. children: [
  25. {
  26. name: 'Cousin Jack',
  27. value: 2
  28. },
  29. {
  30. name: 'Cousin Mary',
  31. value: 5,
  32. children: [
  33. {
  34. name: 'Jackson',
  35. value: 2
  36. }
  37. ]
  38. },
  39. {
  40. name: 'Cousin Ben',
  41. value: 4
  42. }
  43. ]
  44. },
  45. {
  46. name: 'Father',
  47. value: 10,
  48. children: [
  49. {
  50. name: 'Me',
  51. value: 5
  52. },
  53. {
  54. name: 'Brother Peter',
  55. value: 1
  56. }
  57. ]
  58. }
  59. ]
  60. },
  61. {
  62. name: 'Nancy',
  63. children: [
  64. {
  65. name: 'Uncle Nike',
  66. children: [
  67. {
  68. name: 'Cousin Betty',
  69. value: 1
  70. },
  71. {
  72. name: 'Cousin Jenny',
  73. value: 2
  74. }
  75. ]
  76. }
  77. ]
  78. }
  79. ];
  80. option = {
  81. series: {
  82. type: 'sunburst',
  83. data: data,
  84. radius: [60, '90%'],
  85. itemStyle: {
  86. borderRadius: 7,
  87. borderWidth: 2
  88. },
  89. label: {
  90. show: false
  91. }
  92. }
  93. };
  94. option && myChart.setOption(option);
  95. </script>
  96. </body>

pie.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>饼状图</title>
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width:450px; height:200px;"></div>
  13. <script type="text/javascript">
  14. window.onload = function pie() {
  15. // 基于准备好的dom,初始化echarts实例
  16. var myChart = echarts.init(document.getElementById('main'));
  17. myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
  18. //声明一个对象
  19. var list = [];
  20. var nus = [];
  21. $.ajax({
  22. async: true, //异步请求
  23. data: {},
  24. //请求方式get
  25. type: "GET",
  26. //请求地址
  27. url: "/productsaletopN/list",
  28. //数据,json字符串
  29. dataType: "json",
  30. //请求成功
  31. success: function (result) {
  32. console.log(result);
  33. //进行数据的遍历
  34. $.each(result, function (index, item) {
  35. //添加数据到对象
  36. //物品名
  37. list.push(item.skuId);
  38. //物品名和数量
  39. nus.push({
  40. value: item.paymentAmount,
  41. name: item.skuId
  42. });
  43. });
  44. console.log(list);
  45. console.log(nus);
  46. myChart.hideLoading(); //隐藏加载动画
  47. var option = {
  48. title: {
  49. text: '',
  50. left: 'center'
  51. },
  52. tooltip: {
  53. trigger: 'item',
  54. formatter: '{a} <br/>{b}: {c} ({d}%)'
  55. // 计算占比%
  56. },
  57. legend: { //旁边的小标图
  58. orient: 'vertical',
  59. right: 10,
  60. top: 300,
  61. //添加物品名
  62. data: list
  63. },
  64. series: [
  65. {
  66. name: '访问来源',
  67. type: 'pie', // 设置图表类型为饼图
  68. radius: '55%', //饼图的半径,外半径为可视区尺寸的长度。
  69. // roseType: 'angle', //设置图表类型为南丁格尔图
  70. avoidLabelOverlap: false,
  71. emphasis: {
  72. label: {
  73. show: true,
  74. fontSize: '30',
  75. fontWeight: 'bold'
  76. }
  77. },
  78. labelLine: {
  79. lineStyle: {
  80. color: ''
  81. // color: 'rgba(200, 0, 255, 0.3)'
  82. },
  83. smooth: 0.2,
  84. length: 10,
  85. length2: 20
  86. },
  87. itemStyle: {
  88. emphasis: {
  89. shadowBlur: 10,
  90. shadowOffsetX: 0,
  91. shadowColor: 'rgba(0, 0, 0, 0.5)'
  92. },
  93. normal:{
  94. color:function(params) {
  95. //自定义颜色
  96. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  97. return colorList[params.dataIndex]
  98. }
  99. }
  100. },
  101. data: nus
  102. }
  103. ]
  104. };
  105. myChart.setOption(option);
  106. },
  107. error: function (errorMsg) {
  108. //请求失败时执行该函数
  109. alert("图表请求数据失败!");
  110. myChart.hideLoading();
  111. }
  112. });
  113. };
  114. </script>
  115. </body>
  116. </html>

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>柱状图</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width: 450px;height:200px;"></div>
  13. <script type="text/javascript">
  14. // 基于准备好的dom,初始化echarts实例
  15. var myChart = echarts.init(document.getElementById('main'));
  16. // 指定图表的配置项和数据
  17. var option = {
  18. title: {
  19. text: ''
  20. },
  21. legend: {
  22. data:['销售额']
  23. },
  24. xAxis: {
  25. data: {}
  26. },
  27. yAxis: {},
  28. series: [{
  29. name: '销售额',
  30. type: 'bar',
  31. itemStyle: {
  32. emphasis: {
  33. shadowBlur: 10,
  34. shadowOffsetX: 0,
  35. shadowColor: 'rgba(0, 0, 0, 0.5)'
  36. },
  37. normal:{
  38. color:function(params) {
  39. //自定义颜色
  40. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  41. return colorList[params.dataIndex]
  42. }
  43. }
  44. },
  45. data: {}
  46. }]
  47. };
  48. var names=[];
  49. var nums=[];
  50. $.ajax({
  51. type: "get",
  52. url: "/productsaletopN/list",
  53. contentType: "application/json",
  54. success: function (res) {
  55. console.log("====res:=====")
  56. console.log(res);
  57. for (var i = 0; i < res.length; i++) {
  58. names.push(res[i].skuId);
  59. nums.push(res[i].paymentAmount);
  60. }
  61. myChart.setOption({
  62. xAxis: {data: names},
  63. series: [{name: '销售额',
  64. itemStyle: {
  65. emphasis: {
  66. shadowBlur: 10,
  67. shadowOffsetX: 0,
  68. shadowColor: 'rgba(0, 0, 0, 0.5)'
  69. },
  70. normal:{
  71. color:function(params) {
  72. //自定义颜色
  73. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  74. return colorList[params.dataIndex]
  75. }
  76. }
  77. },
  78. data: nums}]
  79. });
  80. }
  81. });
  82. // 使用刚指定的配置项和数据显示图表。
  83. myChart.setOption(option);
  84. </script>
  85. </body>

line.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ECharts</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width: 700px;height:300px;"></div>
  13. <script type="text/javascript">
  14. // 基于准备好的dom,初始化echarts实例
  15. // var myChart = echarts.init(document.getElementById('main'));
  16. var chartDom = document.getElementById('main');
  17. var myChart = echarts.init(chartDom);
  18. var option;
  19. var dts=[];
  20. var homeCounts=[];
  21. var goodDetailCounts=[];
  22. var goodDetail2cartConvertRatios=[];
  23. var cart2orderConvertRatios=[];
  24. var order2paymentConvertRatios=[];
  25. var cartCouns=[];
  26. var orderCounts=[];
  27. var paymentAmounts=[];
  28. $.ajax({
  29. type: "get",
  30. url: "/useractioncount/list",
  31. contentType: "application/json",
  32. success: function (res) {
  33. console.log("====res:=====")
  34. console.log(res);
  35. for (var i = 0; i < res.length; i++) {
  36. dts.push(res[i].dt);
  37. homeCounts.push(res[i].homeCount);
  38. goodDetailCounts.push(res[i]. goodDetailCount);
  39. goodDetail2cartConvertRatios.push(res[i].goodDetail2cartConvertRatio);
  40. cart2orderConvertRatios.push(res[i].cart2orderConvertRatio);
  41. order2paymentConvertRatios.push(res[i].order2paymentConvertRatio);
  42. cartCouns.push(res[i].cartCoun);
  43. orderCounts.push(res[i].orderCount);
  44. paymentAmounts.push(res[i].paymentAmount);
  45. };
  46. option = {
  47. title: {
  48. text: ''
  49. },
  50. tooltip: {
  51. trigger: 'axis'
  52. },
  53. legend: {
  54. data: ['homeCount', 'goodDetailCount', 'goodDetail2cartConvertRatio', 'cart2orderConvertRatio', 'order2paymentConvertRatio','cartCoun','orderCounts','paymentAmount']
  55. },
  56. grid: {
  57. left: '3%',
  58. right: '4%',
  59. bottom: '3%',
  60. containLabel: true
  61. },
  62. toolbox: {
  63. feature: {
  64. saveAsImage: {}
  65. }
  66. },
  67. xAxis: {
  68. type: 'category',
  69. boundaryGap: false,
  70. data:dts
  71. },
  72. yAxis: {
  73. type: 'value'
  74. },
  75. itemStyle: {
  76. emphasis: {
  77. shadowBlur: 10,
  78. shadowOffsetX: 0,
  79. shadowColor: 'rgba(0, 0, 0, 0.5)'
  80. },
  81. normal:{
  82. color:function(params) {
  83. //自定义颜色
  84. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  85. return colorList[params.dataIndex]
  86. }
  87. }
  88. },
  89. series: [
  90. {
  91. name: 'homeCount',
  92. type: 'line',
  93. stack: 'Total',
  94. data: homeCounts
  95. },
  96. {
  97. name: 'goodDetailCount',
  98. type: 'line',
  99. stack: 'Total',
  100. data: goodDetailCounts
  101. },
  102. {
  103. name: 'goodDetail2cartConvertRatio',
  104. type: 'line',
  105. stack: 'Total',
  106. data: goodDetail2cartConvertRatios
  107. },
  108. {
  109. name: 'cart2orderConvertRatio',
  110. type: 'line',
  111. stack: 'Total',
  112. data: cart2orderConvertRatios
  113. },
  114. {
  115. name: 'cartCoun',
  116. type: 'line',
  117. stack: 'Total',
  118. data: cartCouns
  119. },
  120. {
  121. name: 'orderCount',
  122. type: 'line',
  123. stack: 'Total',
  124. data: orderCounts
  125. },
  126. {
  127. name: 'paymentAmount',
  128. type: 'line',
  129. stack: 'Total',
  130. data: paymentAmounts
  131. },
  132. {
  133. name: 'order2paymentConvertRatio',
  134. type: 'line',
  135. stack: 'Total',
  136. data: order2paymentConvertRatios
  137. }
  138. ]
  139. };
  140. option && myChart.setOption(option);
  141. }
  142. });
  143. </script>
  144. </body>

map.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>地图</title>
  6. <script src="/js/echarts.min.js"></script>
  7. <script src="/js/jquery-3.5.1.min.js"></script>
  8. <script src="/JS/china.js"></script>
  9. </head>
  10. <body >
  11. <div id="box" style="width: 700px; height: 300px;"></div>
  12. <script>
  13. // 初始化echarts实例
  14. var myEcharts = echarts.init(document.getElementById("box"));
  15. var option = {
  16. title: { //标题样式
  17. text: '全国消费水平分布',
  18. x: "center",
  19. textStyle: {
  20. fontSize: 18,
  21. color: "cornsilk"
  22. },
  23. },
  24. tooltip: { //这里设置提示框
  25. trigger: 'item', //数据项图形触发
  26. backgroundColor: "red", //提示框浮层的背景颜色。
  27. //字符串模板(地图): {a}(系列名称),{b}(区域名称),{c}(合并数值),{d}(无)
  28. formatter: '地区:{b}<br/>模拟数据:{c}'
  29. },
  30. visualMap: {//视觉映射组件
  31. top: 'center',
  32. left: 'left',
  33. min: 10,
  34. max: 500000,
  35. text: ['High', 'Low'],
  36. realtime: false, //拖拽时,是否实时更新
  37. calculable: true, //是否显示拖拽用的手柄
  38. inRange: {
  39. color: ['lightskyblue', 'yellow', 'orangered']
  40. }
  41. },
  42. series: [
  43. {
  44. name: '模拟数据',
  45. type: 'map',
  46. mapType: 'china',
  47. roam: false,//是否开启鼠标缩放和平移漫游
  48. itemStyle: {//地图区域的多边形 图形样式
  49. normal: {//是图形在默认状态下的样式
  50. label: {
  51. show: true,//是否显示标签
  52. textStyle: {
  53. color: "black"
  54. }
  55. }
  56. },
  57. zoom: 1.5, //地图缩放比例,默认为1
  58. emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
  59. label: { show: true }
  60. }
  61. },
  62. top: "3%",//组件距离容器的距离
  63. data: [
  64. { name: '北京', value: 350000 },
  65. { name: '天津', value: 120000 },
  66. { name: '上海', value: 300000 },
  67. { name: '重庆', value: 92000 },
  68. { name: '河北', value: 25000 },
  69. { name: '河南', value: 20000 },
  70. { name: '云南', value: 500 },
  71. { name: '辽宁', value: 3050 },
  72. { name: '黑龙江', value: 80000 },
  73. { name: '湖南', value: 2000 },
  74. { name: '安徽', value: 24580 },
  75. { name: '山东', value: 40629 },
  76. { name: '新疆', value: 36981 },
  77. { name: '江苏', value: 13569 },
  78. { name: '浙江', value: 24956 },
  79. { name: '江西', value: 15194 },
  80. { name: '湖北', value: 41398 },
  81. { name: '广西', value: 41150 },
  82. { name: '甘肃', value: 17630 },
  83. { name: '山西', value: 27370 },
  84. { name: '内蒙古', value: 27370 },
  85. { name: '陕西', value: 97208 },
  86. { name: '吉林', value: 88290 },
  87. { name: '福建', value: 19978 },
  88. { name: '贵州', value: 94485 },
  89. { name: '广东', value: 89426 },
  90. { name: '青海', value: 35484 },
  91. { name: '西藏', value: 97413 },
  92. { name: '四川', value: 54161 },
  93. { name: '宁夏', value: 56515 },
  94. { name: '海南', value: 54871 },
  95. { name: '台湾', value: 48544 },
  96. { name: '香港', value: 49474 },
  97. { name: '澳门', value: 34594 }
  98. ]
  99. }
  100. ]
  101. };
  102. // 使用刚指定的配置项和数据显示图表。
  103. myEcharts.setOption(option);
  104. </script>
  105. </body>

bar.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>虚拟柱状图</title>
  6. <script src="/js/echarts.min.js"></script>
  7. <script src="/js/jquery-3.5.1.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="main" style="width: 450px;height:200px;"></div>
  11. <script type="text/javascript">
  12. var chartDom = document.getElementById('main');
  13. var myChart = echarts.init(chartDom);
  14. var option;
  15. // Generate data
  16. let category = [];
  17. let dottedBase = +new Date();
  18. let lineData = [];
  19. let barData = [];
  20. for (let i = 0; i < 20; i++) {
  21. let date = new Date((dottedBase += 3600 * 24 * 1000));
  22. category.push(
  23. [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
  24. );
  25. let b = Math.random() * 200;
  26. let d = Math.random() * 200;
  27. barData.push(b);
  28. lineData.push(d + b);
  29. }
  30. // option
  31. option = {
  32. backgroundColor: '',
  33. tooltip: {
  34. trigger: 'axis',
  35. axisPointer: {
  36. type: 'shadow'
  37. }
  38. },
  39. legend: {
  40. data: ['line', 'bar'],
  41. textStyle: {
  42. color: '#ccc'
  43. }
  44. },
  45. xAxis: {
  46. data: category,
  47. axisLine: {
  48. lineStyle: {
  49. color: '#ccc'
  50. }
  51. }
  52. },
  53. yAxis: {
  54. splitLine: { show: false },
  55. axisLine: {
  56. lineStyle: {
  57. color: '#ccc'
  58. }
  59. }
  60. },
  61. series: [
  62. {
  63. name: 'line',
  64. type: 'line',
  65. smooth: true,
  66. showAllSymbol: true,
  67. symbol: 'emptyCircle',
  68. symbolSize: 5,
  69. data: lineData
  70. },
  71. {
  72. name: 'bar',
  73. type: 'bar',
  74. barWidth: 10,
  75. itemStyle: {
  76. borderRadius: 5,
  77. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  78. { offset: 0, color: '#14c8d4' },
  79. { offset: 1, color: '#43eec6' }
  80. ])
  81. },
  82. data: barData
  83. },
  84. {
  85. name: 'line',
  86. type: 'bar',
  87. barGap: '-100%',
  88. barWidth: 10,
  89. itemStyle: {
  90. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  91. { offset: 0, color: 'rgba(20,200,212,0.5)' },
  92. { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
  93. { offset: 1, color: 'rgba(20,200,212,0)' }
  94. ])
  95. },
  96. z: -12,
  97. data: lineData
  98. },
  99. {
  100. name: 'dotted',
  101. type: 'pictorialBar',
  102. symbol: 'rect',
  103. itemStyle: {
  104. color: '#0f375f'
  105. },
  106. symbolRepeat: true,
  107. symbolSize: [12, 4],
  108. symbolMargin: 1,
  109. z: -10,
  110. data: lineData
  111. }
  112. ]
  113. };
  114. option && myChart.setOption(option);
  115. </script>
  116. </body>
bar-trend.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>柱状图</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width: 450px;height:200px;"></div>
  13. <script type="text/javascript">
  14. var chartDom = document.getElementById('main');
  15. var myChart = echarts.init(chartDom);
  16. var option;
  17. let xAxisData = [];
  18. let data1 = [];
  19. let data2 = [];
  20. let data3 = [];
  21. let data4 = [];
  22. for (let i = 0; i < 10; i++) {
  23. xAxisData.push('Class' + i);
  24. data1.push(+(Math.random() * 2).toFixed(2));
  25. data2.push(+(Math.random() * 5).toFixed(2));
  26. data3.push(+(Math.random() + 0.3).toFixed(2));
  27. data4.push(+Math.random().toFixed(2));
  28. }
  29. var emphasisStyle = {
  30. itemStyle: {
  31. shadowBlur: 10,
  32. shadowColor: 'rgba(0,0,0,0.3)'
  33. }
  34. };
  35. option = {
  36. legend: {
  37. data: ['bar', 'bar2', 'bar3', 'bar4'],
  38. left: '10%'
  39. },
  40. brush: {
  41. toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
  42. xAxisIndex: 0
  43. },
  44. toolbox: {
  45. feature: {
  46. magicType: {
  47. type: ['stack']
  48. },
  49. dataView: {}
  50. }
  51. },
  52. tooltip: {},
  53. xAxis: {
  54. data: xAxisData,
  55. name: 'X Axis',
  56. axisLine: { onZero: true },
  57. splitLine: { show: false },
  58. splitArea: { show: false }
  59. },
  60. yAxis: {},
  61. grid: {
  62. bottom: 100
  63. },
  64. series: [
  65. {
  66. name: 'bar',
  67. type: 'bar',
  68. stack: 'one',
  69. emphasis: emphasisStyle,
  70. data: data1
  71. },
  72. {
  73. name: 'bar2',
  74. type: 'bar',
  75. stack: 'one',
  76. emphasis: emphasisStyle,
  77. data: data2
  78. },
  79. {
  80. name: 'bar3',
  81. type: 'bar',
  82. stack: 'two',
  83. emphasis: emphasisStyle,
  84. data: data3
  85. },
  86. {
  87. name: 'bar4',
  88. type: 'bar',
  89. stack: 'two',
  90. emphasis: emphasisStyle,
  91. data: data4
  92. }
  93. ]
  94. };
  95. myChart.on('brushSelected', function (params) {
  96. var brushed = [];
  97. var brushComponent = params.batch[0];
  98. for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
  99. var rawIndices = brushComponent.selected[sIdx].dataIndex;
  100. brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
  101. }
  102. myChart.setOption({
  103. title: {
  104. backgroundColor: '#333',
  105. text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
  106. bottom: 0,
  107. right: '10%',
  108. width: 100,
  109. textStyle: {
  110. fontSize: 12,
  111. color: '#fff'
  112. }
  113. }
  114. });
  115. });
  116. option && myChart.setOption(option);
  117. </script>
  118. </body>
bar-negative.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>柱状图</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="/js/echarts.min.js"></script>
  8. <script src="/js/jquery-3.5.1.min.js"></script>
  9. </head>
  10. <body>
  11. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  12. <div id="main" style="width: 450px;height:200px;"></div>
  13. <script type="text/javascript">
  14. var chartDom = document.getElementById('main');
  15. var myChart = echarts.init(chartDom);
  16. var option;
  17. option = {
  18. tooltip: {
  19. trigger: 'axis',
  20. axisPointer: {
  21. type: 'shadow'
  22. }
  23. },
  24. legend: {
  25. data: ['Profit', 'Expenses', 'Income']
  26. },
  27. grid: {
  28. left: '3%',
  29. right: '4%',
  30. bottom: '3%',
  31. containLabel: true
  32. },
  33. xAxis: [
  34. {
  35. type: 'value'
  36. }
  37. ],
  38. yAxis: [
  39. {
  40. type: 'category',
  41. axisTick: {
  42. show: false
  43. },
  44. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  45. }
  46. ],
  47. series: [
  48. {
  49. name: 'Profit',
  50. type: 'bar',
  51. label: {
  52. show: true,
  53. position: 'inside'
  54. },
  55. emphasis: {
  56. focus: 'series'
  57. },
  58. data: [200, 170, 240, 244, 200, 220, 210]
  59. },
  60. {
  61. name: 'Income',
  62. type: 'bar',
  63. stack: 'Total',
  64. label: {
  65. show: true
  66. },
  67. emphasis: {
  68. focus: 'series'
  69. },
  70. itemStyle: {
  71. emphasis: {
  72. shadowBlur: 10,
  73. shadowOffsetX: 0,
  74. shadowColor: 'rgba(0, 0, 0, 0.5)'
  75. },
  76. normal:{
  77. color:function(params) {
  78. //自定义颜色
  79. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  80. return colorList[params.dataIndex]
  81. }
  82. }
  83. },
  84. data: [320, 302, 341, 374, 390, 450, 420]
  85. },
  86. {
  87. name: 'Expenses',
  88. type: 'bar',
  89. stack: 'Total',
  90. label: {
  91. show: true,
  92. position: 'left'
  93. },
  94. emphasis: {
  95. focus: 'series'
  96. },
  97. itemStyle: {
  98. emphasis: {
  99. shadowBlur: 10,
  100. shadowOffsetX: 0,
  101. shadowColor: 'rgba(0, 0, 0, 0.5)'
  102. },
  103. normal:{
  104. color:function(params) {
  105. //自定义颜色
  106. var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  107. return colorList[params.dataIndex]
  108. }
  109. }
  110. },
  111. data: [-120, -132, -101, -134, -190, -230, -210]
  112. }
  113. ]
  114. };
  115. option && myChart.setOption(option);
  116. </script>
  117. </body>

endindex.html

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0047)http://yuanbaoshuju.com/bigscreen/17/index.html -->
  3. <html lang="en" style="font-size: 66.4062px;">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="renderer" content="webkit">
  8. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  9. <script type="text/javascript"></script><style type="text/css"></style>
  10. <link rel="stylesheet" href="./JS/style.css">
  11. <title>数据仓库可视化展示</title>
  12. </head>
  13. <body>
  14. <div class="container-flex" tabindex="0" hidefocus="true">
  15. <div class="box-left">
  16. <div class="left-top" width="300px" height="200">
  17. <br/>
  18. <div class="title-box">
  19. <h6>销售环</h6>
  20. </div>
  21. <div id="html_7">
  22. <iframe align="center" width="650" height="200" src="k.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  23. </div>
  24. <div class="title-box">
  25. <h6>商品销售额统计</h6>
  26. </div>
  27. <div id="html_1">
  28. <iframe align="center" width="650" height="200" src="pie.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  29. </div>
  30. <div class="title-box">
  31. <h6>销量统计</h6>
  32. </div>
  33. <div id="html_2">
  34. <iframe align="center" width="650" height="200" src="index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="box-center">
  39. <div class="center">
  40. <font size="30" class="center-top">数据仓库可视化展示</font>
  41. </div>
  42. <div class="center">
  43. <div class="title-box">
  44. <h6></h6>
  45. </div>
  46. <div class="title-box">
  47. <h6></h6>
  48. </div>
  49. <div id="html_3">
  50. <iframe align="center" width="650" height="300" src="line.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  51. </div>
  52. <div class="title-box">
  53. <h6></h6>
  54. </div>
  55. <div id="html_5">
  56. <iframe align="center" width="650" height="300" src="map.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="box-right">
  61. <div class="right-top">
  62. <br/>
  63. <div class="title-box">
  64. <h6>虚拟消费</h6>
  65. </div>
  66. <div id="html_6">
  67. <iframe align="center" width="650" height="200" src="bar.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  68. </div>
  69. <div id="html_8">
  70. <iframe align="center" width="650" height="200" src="bar-trend.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  71. </div>
  72. <div id="html_9">
  73. <div class="title-box">
  74. <h6>收益情况</h6>
  75. </div>
  76. <iframe align="center" width="650" height="200" src="bar-negative.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <script type="text/javascript" src="./JS/china.js"></script>
  82. </body>
  83. </html>

5.4测试

1)运行项目

2)进入浏览器

http://localhost:8080/endindex.html

说明:为了偷懒,只有pie.html,        index.html,        line.html调用了mysql的数据,其他的数据是手敲的。

注:

http://localhost:8080/加上HTML的文件名都能够查看相应的图!

要码源的私聊我

作者水平低,如有错误,恳请指正!谢谢!!!!!

原文链接:https://blog.csdn.net/qq_55906442/article/details/125683834



所属网站分类: 技术文章 > 博客

作者:hhbnn

链接:http://www.phpheidong.com/blog/article/546632/e7e1d498e4436c6c42d5/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

0 0
收藏该文
已收藏

评论内容:(最多支持255个字符)