devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

大数据项目离线数仓（全）四（可视化代码版）_数仓代码

作者：小蓝xlanll | 2024-04-11 00:50:47

赞

踩

数仓代码

作者水平低，如有错误，恳请指正！谢谢！！！！！

来咯来咯！你们要的可视化代码版来咯来咯！

本文仅仅包含可视化的代码版，本项目的其他内容请关注我的博客！在<项目>专栏里！！！

目录

一、所需工具

二、数据源准备

三、项目框架搭建

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测试

一、所需工具

MySQL

IDEA

jdk1.8

maven

二、数据源准备

sqoop导出数据到MySQL_一个人的牛牛的博客-CSDN博客

三、项目框架搭建

3.1新建springboot项目

创建springboot项目有二种方式：在IDEA中创建和在官网创建

我喜欢在官网创建

3.1.1进入官网

https://start.spring.io/

3.1.2创建项目

 注意红色框框的地方，选择你对应的版本，

注：1.点击添加相关依赖；

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>

</project>

4.2配置数据源

重命名或者复制，把application.properties变为application.yml

 在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是我的MySQLIP地址；

（2）gmall_report是用到的数据库名；

（3）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类

 AreaTopicEntity

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

GoodEntity 

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

OrderDayCountEntity

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

ProductSaleTopNEntity

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

UserActionCountEntity

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

4.4.2dao

 AreaTopicDao

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

GoodDao

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

OrderDayCountDao

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

ProductSaleTopNDao

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

UserActionCountDao

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

4.4.3service

记得在service包下创建一个impl包；

AreaTopicService

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

 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.  
  7. @Service("areatopicService")
  8. public class AreaTopicServiceImpl extends ServiceImpl<AreaTopicDao, AreaTopicEntity> implements AreaTopicService {
  9. }

GoodService

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

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.  
  7. @Service("goodService")
  8. public class GoodServiceImpl extends ServiceImpl<GoodDao, GoodEntity> implements GoodService {
  9. }

OrderDayCountService

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

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.  
  7. @Service("orderdaycountService")
  8. public class OrderDayCountServiceImpl extends ServiceImpl<OrderDayCountDao, OrderDayCountEntity> implements OrderDayCountService {
  9. }

ProductSaleTopNService

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

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.  
  7. @Service("productsaletopNService")
  8. public class ProductSaleTopNServiceImpl extends ServiceImpl<ProductSaleTopNDao, ProductSaleTopNEntity> implements ProductSaleTopNService {
  9. }

UserActionCountService

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

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.  
  7. @Service("useractioncountService")
  8. public class UserActionCountServiceImpl extends ServiceImpl<UserActionCountDao, UserActionCountEntity> implements UserActionCountService {
  9. }

4.4.4controller

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.  
  7. import java.util.List;
  8.  
  9. @RestController
  10. @RequestMapping("areatopic")
  11. public class AreaTopicController {
  12.     @Autowired
  13.     private AreaTopicService areaTopicService;
  14.  
  15.     @RequestMapping("list")
  16.     public List<AreaTopicEntity> list(){
  17.         return areaTopicService.list();
  18.     }
  19. }

 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.  
  7. import java.util.List;
  8.  
  9. @RestController
  10. @RequestMapping("goods")
  11. public class GoodController {
  12.  
  13.     @Autowired
  14.     private GoodService goodService;
  15.  
  16.     @RequestMapping("list")
  17.     public List<GoodEntity> list() {
  18.  
  19.         return goodService.list();
  20.     }
  21. }

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.  
  7. import java.util.List;
  8.  
  9. @RestController
  10. @RequestMapping("orderdaycount")
  11. public class OrderDayCountController {
  12.  
  13.     @Autowired
  14.     private OrderDayCountService orderdaycountService;
  15.  
  16.     @RequestMapping("list")
  17.     public List<OrderDayCountEntity> list(){
  18.         return orderdaycountService.list();
  19.     }
  20. }

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.  
  7. import java.util.List;
  8.  
  9. @RestController
  10. @RequestMapping("productsaletopN")
  11. public class ProductSaleTopNController {
  12.  
  13.     @Autowired
  14.     private ProductSaleTopNService productSaleTopNService;
  15.  
  16.     @RequestMapping("list")
  17.     public List<ProductSaleTopNEntity> list(){
  18.         return productSaleTopNService.list();
  19.     }
  20. }

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.  
  7. import java.util.List;
  8.  
  9. @RestController
  10. @RequestMapping("useractioncount")
  11. public class UserActionCountController {
  12.  
  13.     @Autowired
  14.     private UserActionCountService userActionCountService;
  15.     @RequestMapping("list")
  16.     public List<UserActionCountEntity> list(){
  17.         return userActionCountService.list();
  18.     }
  19. }

4.5测试

点击启动项目

 启动成功样式

 进入浏览器，测试接口

  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

 都出现数据说明上面的代码没有问题！ 

五、前端代码编写

5.1准备

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

通过以下官网可以找到：

下载 - Apache ECharts

Download jQuery | jQuery

jquery下载所有版本（实时更新）

知道大家下载麻烦，我已经准备了好了，内含用到的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.  
  15.     var chartDom = document.getElementById('main');
  16.     var myChart = echarts.init(chartDom);
  17.     var option;
  18.  
  19.     var data = [
  20.         {
  21.             name: 'Grandpa',
  22.             children: [
  23.                 {
  24.                     name: 'Uncle Leo',
  25.                     value: 15,
  26.                     children: [
  27.                         {
  28.                             name: 'Cousin Jack',
  29.                             value: 2
  30.                         },
  31.                         {
  32.                             name: 'Cousin Mary',
  33.                             value: 5,
  34.                             children: [
  35.                                 {
  36.                                     name: 'Jackson',
  37.                                     value: 2
  38.                                 }
  39.                             ]
  40.                         },
  41.                         {
  42.                             name: 'Cousin Ben',
  43.                             value: 4
  44.                         }
  45.                     ]
  46.                 },
  47.                 {
  48.                     name: 'Father',
  49.                     value: 10,
  50.                     children: [
  51.                         {
  52.                             name: 'Me',
  53.                             value: 5
  54.                         },
  55.                         {
  56.                             name: 'Brother Peter',
  57.                             value: 1
  58.                         }
  59.                     ]
  60.                 }
  61.             ]
  62.         },
  63.         {
  64.             name: 'Nancy',
  65.             children: [
  66.                 {
  67.                     name: 'Uncle Nike',
  68.                     children: [
  69.                         {
  70.                             name: 'Cousin Betty',
  71.                             value: 1
  72.                         },
  73.                         {
  74.                             name: 'Cousin Jenny',
  75.                             value: 2
  76.                         }
  77.                     ]
  78.                 }
  79.             ]
  80.         }
  81.     ];
  82.     option = {
  83.         series: {
  84.  
  85.             type: 'sunburst',
  86.             data: data,
  87.             radius: [60, '90%'],
  88.             itemStyle: {
  89.                 borderRadius: 7,
  90.                 borderWidth: 2
  91.             },
  92.             label: {
  93.                 show: false
  94.             }
  95.         }
  96.     };
  97.  
  98.     option && myChart.setOption(option);
  99.  
  100. </script>
  101. </body>

pie.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>饼状图</title>
  8.     <script src="/js/echarts.min.js"></script>
  9.     <script src="/js/jquery-3.5.1.min.js"></script>
  10. </head>
  11.  
  12. <body>
  13. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  14. <div id="main" style="width:450px; height:200px;"></div>
  15. <script type="text/javascript">
  16.     window.onload = function pie() {
  17.         // 基于准备好的dom，初始化echarts实例
  18.         var myChart = echarts.init(document.getElementById('main'));
  19.  
  20.  
  21.         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
  22.         //声明一个对象
  23.         var list = [];
  24.         var nus = [];
  25.         $.ajax({
  26.             async: true,            //异步请求
  27.             data: {},
  28.             //请求方式get
  29.             type: "GET",
  30.             //请求地址
  31.             url: "/productsaletopN/list",
  32.             //数据，json字符串
  33.             dataType: "json",
  34.             //请求成功
  35.             success: function (result) {
  36.                 console.log(result);
  37.                 //进行数据的遍历
  38.                 $.each(result, function (index, item) {
  39.                     //添加数据到对象
  40.                     //物品名
  41.                     list.push(item.skuId);
  42.                     //物品名和数量
  43.                     nus.push({
  44.                         value: item.paymentAmount,
  45.                         name: item.skuId
  46.                     });
  47.                 });
  48.                 console.log(list);
  49.                 console.log(nus);
  50.                 myChart.hideLoading();    //隐藏加载动画
  51.  
  52.                 var option = {
  53.                     title: {
  54.                         text: '',
  55.                         left: 'center'
  56.                     },
  57.  
  58.                     tooltip: {
  59.                         trigger: 'item',
  60.                         formatter: '{a} <br/>{b}: {c} ({d}%)'
  61.                         // 计算占比%
  62.                     },
  63.  
  64.                     legend: {                 //旁边的小标图
  65.                         orient: 'vertical',
  66.                         right: 10,
  67.                         top: 300,
  68.                         //添加物品名
  69.                         data: list
  70.                     },
  71.                     series: [
  72.                         {
  73.                             name: '访问来源',
  74.                             type: 'pie',     // 设置图表类型为饼图
  75.                             radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
  76.                             // roseType: 'angle',           //设置图表类型为南丁格尔图
  77.                             avoidLabelOverlap: false,
  78.                             emphasis: {
  79.                                 label: {
  80.                                     show: true,
  81.                                     fontSize: '30',
  82.                                     fontWeight: 'bold'
  83.                                 }
  84.                             },
  85.                             labelLine: {
  86.                                 lineStyle: {
  87.                                     color: ''
  88.                                     // color: 'rgba(200, 0, 255, 0.3)'
  89.                                 },
  90.                                 smooth: 0.2,
  91.                                 length: 10,
  92.                                 length2: 20
  93.  
  94.                             },
  95.  
  96.                             itemStyle: {
  97.                                 emphasis: {
  98.                                     shadowBlur: 10,
  99.                                     shadowOffsetX: 0,
  100.                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  101.                                 },
  102.                                 normal:{
  103.                                     color:function(params) {
  104.                                         //自定义颜色
  105.                                         var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  106.                                         return colorList[params.dataIndex]
  107.                                     }
  108.                                 }
  109.                             },
  110.  
  111.                             data: nus
  112.                         }
  113.                     ]
  114.                 };
  115.                 myChart.setOption(option);
  116.             },
  117.             error: function (errorMsg) {
  118.                 //请求失败时执行该函数
  119.                 alert("图表请求数据失败!");
  120.                 myChart.hideLoading();
  121.             }
  122.         });
  123.     };
  124. </script>
  125. </body>
  126. </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.     // 指定图表的配置项和数据
  18.     var option = {
  19.         title: {
  20.             text: ''
  21.         },
  22.  
  23.         legend: {
  24.             data:['销售额']
  25.         },
  26.         xAxis: {
  27.             data: {}
  28.         },
  29.         yAxis: {},
  30.         series: [{
  31.             name: '销售额',
  32.             type: 'bar',
  33.             itemStyle: {
  34.                 emphasis: {
  35.                     shadowBlur: 10,
  36.                     shadowOffsetX: 0,
  37.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  38.                 },
  39.                 normal:{
  40.                     color:function(params) {
  41.                         //自定义颜色
  42.                         var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  43.                         return colorList[params.dataIndex]
  44.                     }
  45.                 }
  46.             },
  47.             data: {}
  48.         }]
  49.     };
  50.  
  51.     var names=[];
  52.     var nums=[];
  53.  
  54.     $.ajax({
  55.         type: "get",
  56.         url: "/productsaletopN/list",
  57.         contentType: "application/json",
  58.         success: function (res) {
  59.             console.log("====res：=====")
  60.             console.log(res);
  61.             for (var i = 0; i < res.length; i++) {
  62.                 names.push(res[i].skuId);
  63.                 nums.push(res[i].paymentAmount);
  64.             }
  65.             myChart.setOption({
  66.                 xAxis: {data: names},
  67.                 series: [{name: '销售额',
  68.                     itemStyle: {
  69.                         emphasis: {
  70.                             shadowBlur: 10,
  71.                             shadowOffsetX: 0,
  72.                             shadowColor: 'rgba(0, 0, 0, 0.5)'
  73.                         },
  74.                         normal:{
  75.                             color:function(params) {
  76.                                 //自定义颜色
  77.                                 var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  78.                                 return colorList[params.dataIndex]
  79.                             }
  80.                         }
  81.                     },
  82.                     data: nums}]
  83.             });
  84.         }
  85.     });
  86.  
  87.     // 使用刚指定的配置项和数据显示图表。
  88.     myChart.setOption(option);
  89. </script>
  90. </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.  
  20.     var dts=[];
  21.     var homeCounts=[];
  22.     var goodDetailCounts=[];
  23.     var goodDetail2cartConvertRatios=[];
  24.     var cart2orderConvertRatios=[];
  25.     var order2paymentConvertRatios=[];
  26.  
  27.     var cartCouns=[];
  28.     var orderCounts=[];
  29.     var paymentAmounts=[];
  30.  
  31.  
  32.     $.ajax({
  33.         type: "get",
  34.         url: "/useractioncount/list",
  35.         contentType: "application/json",
  36.         success: function (res) {
  37.             console.log("====res：=====")
  38.             console.log(res);
  39.             for (var i = 0; i < res.length; i++) {
  40.                 dts.push(res[i].dt);
  41.                 homeCounts.push(res[i].homeCount);
  42.                 goodDetailCounts.push(res[i]. goodDetailCount);
  43.                 goodDetail2cartConvertRatios.push(res[i].goodDetail2cartConvertRatio);
  44.                 cart2orderConvertRatios.push(res[i].cart2orderConvertRatio);
  45.                 order2paymentConvertRatios.push(res[i].order2paymentConvertRatio);
  46.                 cartCouns.push(res[i].cartCoun);
  47.                 orderCounts.push(res[i].orderCount);
  48.                 paymentAmounts.push(res[i].paymentAmount);
  49.             };
  50.  
  51.             option = {
  52.                 title: {
  53.                     text: ''
  54.                 },
  55.                 tooltip: {
  56.                     trigger: 'axis'
  57.                 },
  58.                 legend: {
  59.                     data: ['homeCount', 'goodDetailCount', 'goodDetail2cartConvertRatio', 'cart2orderConvertRatio', 'order2paymentConvertRatio','cartCoun','orderCounts','paymentAmount']
  60.                 },
  61.                 grid: {
  62.                     left: '3%',
  63.                     right: '4%',
  64.                     bottom: '3%',
  65.                     containLabel: true
  66.                 },
  67.                 toolbox: {
  68.                     feature: {
  69.                         saveAsImage: {}
  70.                     }
  71.                 },
  72.                 xAxis: {
  73.                     type: 'category',
  74.                     boundaryGap: false,
  75.                     data:dts
  76.                 },
  77.                 yAxis: {
  78.                     type: 'value'
  79.                 },
  80.  
  81.                 itemStyle: {
  82.                     emphasis: {
  83.                         shadowBlur: 10,
  84.                         shadowOffsetX: 0,
  85.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  86.                     },
  87.                     normal:{
  88.                         color:function(params) {
  89.                             //自定义颜色
  90.                             var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  91.                             return colorList[params.dataIndex]
  92.                         }
  93.                     }
  94.                 },
  95.                 series: [
  96.  
  97.                     {
  98.                         name: 'homeCount',
  99.                         type: 'line',
  100.                         stack: 'Total',
  101.                         data: homeCounts
  102.                     },
  103.                     {
  104.                         name: 'goodDetailCount',
  105.                         type: 'line',
  106.                         stack: 'Total',
  107.                         data: goodDetailCounts
  108.                     },
  109.                     {
  110.                         name: 'goodDetail2cartConvertRatio',
  111.                         type: 'line',
  112.                         stack: 'Total',
  113.                         data: goodDetail2cartConvertRatios
  114.                     },
  115.                     {
  116.                         name: 'cart2orderConvertRatio',
  117.                         type: 'line',
  118.                         stack: 'Total',
  119.                         data: cart2orderConvertRatios
  120.                     },
  121.                     {
  122.                         name: 'cartCoun',
  123.                         type: 'line',
  124.                         stack: 'Total',
  125.                         data: cartCouns
  126.                     },
  127.                     {
  128.                         name: 'orderCount',
  129.                         type: 'line',
  130.                         stack: 'Total',
  131.                         data: orderCounts
  132.                     },
  133.                     {
  134.                         name: 'paymentAmount',
  135.                         type: 'line',
  136.                         stack: 'Total',
  137.                         data: paymentAmounts
  138.                     },
  139.                     {
  140.                         name: 'order2paymentConvertRatio',
  141.                         type: 'line',
  142.                         stack: 'Total',
  143.                         data: order2paymentConvertRatios
  144.                     }
  145.                 ]
  146.             };
  147.  
  148.             option && myChart.setOption(option);
  149.         }
  150.     });
  151.  
  152. </script>
  153. </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.  
  10. </head>
  11. <body >
  12. <div id="box" style="width: 700px; height: 300px;"></div>
  13. <script>
  14.     // 初始化echarts实例
  15.     var myEcharts = echarts.init(document.getElementById("box"));
  16.  
  17.     var option = {
  18.         title: {  //标题样式
  19.             text: '全国消费水平分布',
  20.             x: "center",
  21.             textStyle: {
  22.                 fontSize: 18,
  23.                 color: "cornsilk"
  24.             },
  25.         },
  26.         tooltip: {  //这里设置提示框
  27.             trigger: 'item',  //数据项图形触发
  28.             backgroundColor: "red",  //提示框浮层的背景颜色。
  29.             //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
  30.             formatter: '地区：{b}<br/>模拟数据：{c}'
  31.         },
  32.         visualMap: {//视觉映射组件
  33.             top: 'center',
  34.             left: 'left',
  35.             min: 10,
  36.             max: 500000,
  37.             text: ['High', 'Low'],
  38.             realtime: false,  //拖拽时，是否实时更新
  39.             calculable: true,  //是否显示拖拽用的手柄
  40.             inRange: {
  41.                 color: ['lightskyblue', 'yellow', 'orangered']
  42.             }
  43.         },
  44.         series: [
  45.             {
  46.                 name: '模拟数据',
  47.                 type: 'map',
  48.                 mapType: 'china',
  49.                 roam: false,//是否开启鼠标缩放和平移漫游
  50.                 itemStyle: {//地图区域的多边形 图形样式
  51.                     normal: {//是图形在默认状态下的样式
  52.                         label: {
  53.                             show: true,//是否显示标签
  54.                             textStyle: {
  55.                                 color: "black"
  56.                             }
  57.                         }
  58.                     },
  59.                     zoom: 1.5,  //地图缩放比例,默认为1
  60.                     emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
  61.                         label: { show: true }
  62.                     }
  63.                 },
  64.                 top: "3%",//组件距离容器的距离
  65.                 data: [
  66.                     { name: '北京', value: 350000 },
  67.                     { name: '天津', value: 120000 },
  68.                     { name: '上海', value: 300000 },
  69.                     { name: '重庆', value: 92000 },
  70.                     { name: '河北', value: 25000 },
  71.                     { name: '河南', value: 20000 },
  72.                     { name: '云南', value: 500 },
  73.                     { name: '辽宁', value: 3050 },
  74.                     { name: '黑龙江', value: 80000 },
  75.                     { name: '湖南', value: 2000 },
  76.                     { name: '安徽', value: 24580 },
  77.                     { name: '山东', value: 40629 },
  78.                     { name: '新疆', value: 36981 },
  79.                     { name: '江苏', value: 13569 },
  80.                     { name: '浙江', value: 24956 },
  81.                     { name: '江西', value: 15194 },
  82.                     { name: '湖北', value: 41398 },
  83.                     { name: '广西', value: 41150 },
  84.                     { name: '甘肃', value: 17630 },
  85.                     { name: '山西', value: 27370 },
  86.                     { name: '内蒙古', value: 27370 },
  87.                     { name: '陕西', value: 97208 },
  88.                     { name: '吉林', value: 88290 },
  89.                     { name: '福建', value: 19978 },
  90.                     { name: '贵州', value: 94485 },
  91.                     { name: '广东', value: 89426 },
  92.                     { name: '青海', value: 35484 },
  93.                     { name: '西藏', value: 97413 },
  94.                     { name: '四川', value: 54161 },
  95.                     { name: '宁夏', value: 56515 },
  96.                     { name: '海南', value: 54871 },
  97.                     { name: '台湾', value: 48544 },
  98.                     { name: '香港', value: 49474 },
  99.                     { name: '澳门', value: 34594 }
  100.                 ]
  101.             }
  102.         ]
  103.     };
  104.     // 使用刚指定的配置项和数据显示图表。
  105.     myEcharts.setOption(option);
  106. </script>
  107. </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.  
  16.     // Generate data
  17.     let category = [];
  18.     let dottedBase = +new Date();
  19.     let lineData = [];
  20.     let barData = [];
  21.     for (let i = 0; i < 20; i++) {
  22.         let date = new Date((dottedBase += 3600 * 24 * 1000));
  23.         category.push(
  24.             [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
  25.         );
  26.         let b = Math.random() * 200;
  27.         let d = Math.random() * 200;
  28.         barData.push(b);
  29.         lineData.push(d + b);
  30.     }
  31.     // option
  32.     option = {
  33.         backgroundColor: '',
  34.         tooltip: {
  35.             trigger: 'axis',
  36.             axisPointer: {
  37.                 type: 'shadow'
  38.             }
  39.         },
  40.         legend: {
  41.             data: ['line', 'bar'],
  42.             textStyle: {
  43.                 color: '#ccc'
  44.             }
  45.         },
  46.         xAxis: {
  47.             data: category,
  48.             axisLine: {
  49.                 lineStyle: {
  50.                     color: '#ccc'
  51.                 }
  52.             }
  53.         },
  54.         yAxis: {
  55.             splitLine: { show: false },
  56.             axisLine: {
  57.                 lineStyle: {
  58.                     color: '#ccc'
  59.                 }
  60.             }
  61.         },
  62.         series: [
  63.             {
  64.                 name: 'line',
  65.                 type: 'line',
  66.                 smooth: true,
  67.                 showAllSymbol: true,
  68.                 symbol: 'emptyCircle',
  69.                 symbolSize: 5,
  70.                 data: lineData
  71.             },
  72.             {
  73.                 name: 'bar',
  74.                 type: 'bar',
  75.                 barWidth: 10,
  76.                 itemStyle: {
  77.                     borderRadius: 5,
  78.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  79.                         { offset: 0, color: '#14c8d4' },
  80.                         { offset: 1, color: '#43eec6' }
  81.                     ])
  82.                 },
  83.                 data: barData
  84.             },
  85.             {
  86.                 name: 'line',
  87.                 type: 'bar',
  88.                 barGap: '-100%',
  89.                 barWidth: 10,
  90.                 itemStyle: {
  91.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  92.                         { offset: 0, color: 'rgba(20,200,212,0.5)' },
  93.                         { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
  94.                         { offset: 1, color: 'rgba(20,200,212,0)' }
  95.                     ])
  96.                 },
  97.                 z: -12,
  98.                 data: lineData
  99.             },
  100.             {
  101.                 name: 'dotted',
  102.                 type: 'pictorialBar',
  103.                 symbol: 'rect',
  104.                 itemStyle: {
  105.                     color: '#0f375f'
  106.                 },
  107.                 symbolRepeat: true,
  108.                 symbolSize: [12, 4],
  109.                 symbolMargin: 1,
  110.                 z: -10,
  111.                 data: lineData
  112.             }
  113.         ]
  114.     };
  115.  
  116.     option && myChart.setOption(option);
  117.  
  118. </script>
  119. </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.  
  15.     var chartDom = document.getElementById('main');
  16.     var myChart = echarts.init(chartDom);
  17.     var option;
  18.  
  19.     let xAxisData = [];
  20.     let data1 = [];
  21.     let data2 = [];
  22.     let data3 = [];
  23.     let data4 = [];
  24.     for (let i = 0; i < 10; i++) {
  25.         xAxisData.push('Class' + i);
  26.         data1.push(+(Math.random() * 2).toFixed(2));
  27.         data2.push(+(Math.random() * 5).toFixed(2));
  28.         data3.push(+(Math.random() + 0.3).toFixed(2));
  29.         data4.push(+Math.random().toFixed(2));
  30.     }
  31.     var emphasisStyle = {
  32.         itemStyle: {
  33.             shadowBlur: 10,
  34.             shadowColor: 'rgba(0,0,0,0.3)'
  35.         }
  36.     };
  37.     option = {
  38.         legend: {
  39.             data: ['bar', 'bar2', 'bar3', 'bar4'],
  40.             left: '10%'
  41.         },
  42.         brush: {
  43.             toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
  44.             xAxisIndex: 0
  45.         },
  46.         toolbox: {
  47.             feature: {
  48.                 magicType: {
  49.                     type: ['stack']
  50.                 },
  51.                 dataView: {}
  52.             }
  53.         },
  54.         tooltip: {},
  55.         xAxis: {
  56.             data: xAxisData,
  57.             name: 'X Axis',
  58.             axisLine: { onZero: true },
  59.             splitLine: { show: false },
  60.             splitArea: { show: false }
  61.         },
  62.         yAxis: {},
  63.         grid: {
  64.             bottom: 100
  65.         },
  66.         series: [
  67.             {
  68.                 name: 'bar',
  69.                 type: 'bar',
  70.                 stack: 'one',
  71.                 emphasis: emphasisStyle,
  72.                 data: data1
  73.             },
  74.             {
  75.                 name: 'bar2',
  76.                 type: 'bar',
  77.                 stack: 'one',
  78.                 emphasis: emphasisStyle,
  79.                 data: data2
  80.             },
  81.             {
  82.                 name: 'bar3',
  83.                 type: 'bar',
  84.                 stack: 'two',
  85.                 emphasis: emphasisStyle,
  86.                 data: data3
  87.             },
  88.             {
  89.                 name: 'bar4',
  90.                 type: 'bar',
  91.                 stack: 'two',
  92.                 emphasis: emphasisStyle,
  93.                 data: data4
  94.             }
  95.         ]
  96.     };
  97.     myChart.on('brushSelected', function (params) {
  98.         var brushed = [];
  99.         var brushComponent = params.batch[0];
  100.         for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
  101.             var rawIndices = brushComponent.selected[sIdx].dataIndex;
  102.             brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
  103.         }
  104.         myChart.setOption({
  105.             title: {
  106.                 backgroundColor: '#333',
  107.                 text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
  108.                 bottom: 0,
  109.                 right: '10%',
  110.                 width: 100,
  111.                 textStyle: {
  112.                     fontSize: 12,
  113.                     color: '#fff'
  114.                 }
  115.             }
  116.         });
  117.     });
  118.  
  119.     option && myChart.setOption(option);
  120.  
  121.  
  122. </script>
  123. </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.  
  18.     option = {
  19.         tooltip: {
  20.             trigger: 'axis',
  21.             axisPointer: {
  22.                 type: 'shadow'
  23.             }
  24.         },
  25.         legend: {
  26.             data: ['Profit', 'Expenses', 'Income']
  27.         },
  28.         grid: {
  29.             left: '3%',
  30.             right: '4%',
  31.             bottom: '3%',
  32.             containLabel: true
  33.         },
  34.         xAxis: [
  35.             {
  36.                 type: 'value'
  37.             }
  38.         ],
  39.         yAxis: [
  40.             {
  41.                 type: 'category',
  42.                 axisTick: {
  43.                     show: false
  44.                 },
  45.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  46.             }
  47.         ],
  48.         series: [
  49.             {
  50.                 name: 'Profit',
  51.                 type: 'bar',
  52.                 label: {
  53.                     show: true,
  54.                     position: 'inside'
  55.                 },
  56.                 emphasis: {
  57.                     focus: 'series'
  58.                 },
  59.                 data: [200, 170, 240, 244, 200, 220, 210]
  60.             },
  61.             {
  62.                 name: 'Income',
  63.                 type: 'bar',
  64.                 stack: 'Total',
  65.                 label: {
  66.                     show: true
  67.                 },
  68.                 emphasis: {
  69.                     focus: 'series'
  70.                 },
  71.                 itemStyle: {
  72.                     emphasis: {
  73.                         shadowBlur: 10,
  74.                         shadowOffsetX: 0,
  75.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  76.                     },
  77.                     normal:{
  78.                         color:function(params) {
  79.                             //自定义颜色
  80.                             var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  81.                             return colorList[params.dataIndex]
  82.                         }
  83.                     }
  84.                 },
  85.                 data: [320, 302, 341, 374, 390, 450, 420]
  86.             },
  87.             {
  88.                 name: 'Expenses',
  89.                 type: 'bar',
  90.                 stack: 'Total',
  91.                 label: {
  92.                     show: true,
  93.                     position: 'left'
  94.                 },
  95.                 emphasis: {
  96.                     focus: 'series'
  97.                 },
  98.                 itemStyle: {
  99.                     emphasis: {
  100.                         shadowBlur: 10,
  101.                         shadowOffsetX: 0,
  102.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  103.                     },
  104.                     normal:{
  105.                         color:function(params) {
  106.                             //自定义颜色
  107.                             var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  108.                             return colorList[params.dataIndex]
  109.                         }
  110.                     }
  111.                 },
  112.                 data: [-120, -132, -101, -134, -190, -230, -210]
  113.             }
  114.         ]
  115.     };
  116.  
  117.     option && myChart.setOption(option);
  118.  
  119. </script>
  120. </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.  
  10.     <script type="text/javascript"></script><style type="text/css"></style>
  11.     <link rel="stylesheet" href="./JS/style.css">
  12.     <title>数据仓库可视化展示</title>
  13.  
  14. </head>
  15.  
  16. <body>
  17.     <div class="container-flex" tabindex="0" hidefocus="true">
  18.         <div class="box-left">
  19.             <div class="left-top" width="300px" height="200">
  20.                 <br/>
  21.                 <div class="title-box">
  22.                     <h6>销售环</h6>
  23.                 </div>
  24.                 <div id="html_7">
  25.                     <iframe align="center" width="650" height="200" src="k.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  26.                 </div>
  27.                 <div class="title-box">
  28.                     <h6>商品销售额统计</h6>
  29.                 </div>
  30.                 <div id="html_1">
  31.                     <iframe align="center" width="650" height="200" src="pie.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  32.                 </div>
  33.                 <div class="title-box">
  34.                     <h6>销量统计</h6>
  35.                 </div>
  36.                 <div id="html_2">
  37.                     <iframe align="center" width="650" height="200" src="index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.  
  42.         <div class="box-center">
  43.             <div class="center">
  44.                 <font size="30" class="center-top">数据仓库可视化展示</font>
  45.             </div>
  46.             <div class="center">
  47.                 <div class="title-box">
  48.                     <h6></h6>
  49.                 </div>
  50.                 <div class="title-box">
  51.                     <h6></h6>
  52.                 </div>
  53.                 <div id="html_3">
  54.                     <iframe align="center" width="650" height="300" src="line.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  55.                 </div>
  56.                 <div class="title-box">
  57.                     <h6></h6>
  58.                 </div>
  59.                 <div id="html_5">
  60.                     <iframe align="center" width="650" height="300" src="map.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.  
  65.         <div class="box-right">
  66.             <div class="right-top">
  67.                 <br/>
  68.                 <div class="title-box">
  69.                     <h6>虚拟消费</h6>
  70.                 </div>
  71.                 <div id="html_6">
  72.                     <iframe align="center" width="650" height="200" src="bar.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  73.                 </div>
  74.                 <div id="html_8">
  75.                     <iframe align="center" width="650" height="200" src="bar-trend.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  76.                 </div>
  77.                 <div id="html_9">
  78.                     <div class="title-box">
  79.                         <h6>收益情况</h6>
  80.                     </div>
  81.                     <iframe align="center" width="650" height="200" src="bar-negative.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.     </div>
  86.  
  87. <script type="text/javascript" src="./JS/china.js"></script>
  88.  
  89. </body>
  90. </html>

5.4测试

运行

进入

http://localhost:8080/endindex.html

说明：前端只有pie.html,index.html,line.html调用了mysql的数据，其他的数据是手敲的。

注：

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

要码源的私聊我

作者水平低，如有错误，恳请指正！谢谢！！！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/401951
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号

        
cppcmd=keepalive&