国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

springboot+mybatis+echarts +mysql制作數(shù)據(jù)可視化大屏

2年前作者：一個人的牛牛分類：Toy博客閱讀(27)違法舉報

這篇具有很好參考價值的文章主要介紹了springboot+mybatis+echarts +mysql制作數(shù)據(jù)可視化大屏。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

作者水平低，如有錯誤，懇請指正！謝謝?。。。。?/strong>文章來源地址http://www.zghlxwxcb.cn/news/detail-779569.html

目錄

一、數(shù)據(jù)源

二、所需工具

三、項目框架搭建

3.1新建springboot項目

3.1.1進(jìn)入官網(wǎng)

3.1.2創(chuàng)建項目

四、后端代碼編寫

4.1根據(jù)需求修改pom.xml

4.2配置數(shù)據(jù)源

4.3創(chuàng)建目錄結(jié)構(gòu)

4.4后端編寫代碼

4.4.1entity類

4.4.2dao

4.4.3service

4.4.4controller

4.5測試

五、前端代碼編寫

5.1準(zhǔn)備

5.2創(chuàng)建包

?5.3代碼編寫

5.3.1配置靜態(tài)資源訪問

5.3.2在templates目錄下創(chuàng)建HTML文件

5.4測試

成果展示：

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript

一、數(shù)據(jù)源

1）可以使用自己的MySQL數(shù)據(jù)庫；

2）使用我提供的數(shù)據(jù)。（免費(fèi)下載）

gmall_report用于可視化的SQL文件-MySQL文檔類資源-CSDN下載

二、所需工具

MySQL

IDEA

jdk1.8

Maven

三、項目框架搭建

3.1新建springboot項目

創(chuàng)建springboot項目有二種方式：

1）在IDEA中創(chuàng)建

2）在官網(wǎng)上創(chuàng)建

我喜歡在官網(wǎng)創(chuàng)建

3.1.1進(jìn)入官網(wǎng)

官網(wǎng)地址（記得收藏）：

https://start.spring.io/

3.1.2創(chuàng)建項目

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?注：

1）注意紅色框框的地方，選擇你想要的版本和與你的計算機(jī)相應(yīng)的配置；

2）在1.處點擊添加相關(guān)依賴；

3）在2.處點擊生成初始代碼并下載。

下面給出我的配置信息：

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?項目下載后解壓，然后用IDEA打開解壓后的項目。

四、后端代碼編寫

4.1根據(jù)需求修改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配置數(shù)據(jù)源

1）重命名或者復(fù)制，把a(bǔ)pplication.properties變?yōu)閍pplication.yml

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

2） 在application.yml中添加內(nèi)容：

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

注：要按照實際情況修改內(nèi)容。

（1）192.168.17.XXX是我的MySQL所在計算機(jī)的IP地址，要修改成你的；

（2）3306:是端口號；

（3）gmall_report是用到的數(shù)據(jù)庫名；

（4）root是MySQL的用戶名，123456是用戶相應(yīng)的密碼；

4.3創(chuàng)建目錄結(jié)構(gòu)

按照下圖創(chuàng)建你的包，使其目錄和下圖一樣。

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

4.4后端編寫代碼

想要從MySQL中提取數(shù)據(jù)，要編寫entity，dao，servier，controller類或者接口，強(qiáng)烈建議一張一張表的編寫，方便梳理。

本文用到的表有：goods，ads_area_topic，ads_order_day_count，ads_product_sale_topN，ads_user_action_count

4.4.1entity類

在entity包下面創(chuàng)建java類，如下圖；

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

（1） AreaTopicEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_area_topic")
public class AreaTopicEntity implements Serializable {
    private static final long serialVersionUID = 2L;

    @TableId
    private String dt;

    private String id;

    private String provinceName;

    private String regionName;

    private String orderDayAmount;

    private String paymentDayAmount;

    private String areaCode;
}

?注：

1）ads_area_topic是用到的mysql表名；

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

（2）GoodEntity?

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("goods")
public class GoodEntity implements Serializable {
    private static final long serialVersionUID = 1L;

   @TableId
    private Long id;

   private String name;

   private Integer num;

}

（3）OrderDayCountEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_order_daycount")
public class OrderDayCountEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableId
    private String dt;

    private String orderCount;

    private String orderAmount;

    private String orderUsers;
}

（4）ProductSaleTopNEntity

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;

@Data
@TableName("ads_product_sale_topN")
public class ProductSaleTopNEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableId
    private String dt;

    private String skuId;

    private String paymentAmount;
}

（5）UserActionCountEntity

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import javax.print.DocFlavor;
import java.io.Serializable;

@Data
@TableName("ads_user_action_convert_day")
public class UserActionCountEntity implements Serializable {
    private static final Long serialVersionUID = 1L;

    @TableField
    private String dt;
    private String homeCount;
    private String goodDetailCount;
    private String home2goodDetailConvertRatio;
    private String cartCount;
    private String goodDetail2cartConvertRatio;
    private String orderCount;
    private String cart2orderConvertRatio;
    private String paymentAmount;
    private String order2paymentConvertRatio;

}

4.4.2dao

按照下圖在dao包下面創(chuàng)建java接口文件；

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?（1）AreaTopicDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.AreaTopicEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface AreaTopicDao extends BaseMapper<AreaTopicEntity> {
}

（2）GoodDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.GoodEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface GoodDao extends BaseMapper<GoodEntity> {
}

（3）OrderDayCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.OrderDayCountEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface OrderDayCountDao extends BaseMapper<OrderDayCountEntity> {
}

（4）ProductSaleTopNDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.ProductSaleTopNEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface ProductSaleTopNDao extends BaseMapper<ProductSaleTopNEntity> {
}

（5）UserActionCountDao

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.UserActionCountEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserActionCountDao extends BaseMapper<UserActionCountEntity> {
}

4.4.3service

1）在service包下創(chuàng)建一個impl包；

2）按照下圖的布局在service和impl包下面創(chuàng)建java類和java接口文件

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

（1）AreaTopicService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.AreaTopicEntity;

public interface AreaTopicService extends IService<AreaTopicEntity> {
}

（1.1） AreaTopicServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.AreaTopicDao;
import com.example.demo.entity.AreaTopicEntity;
import com.example.demo.service.AreaTopicService;
import org.springframework.stereotype.Service;

@Service("areatopicService")
public class AreaTopicServiceImpl extends ServiceImpl<AreaTopicDao, AreaTopicEntity> implements AreaTopicService {
}

（2）GoodService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.GoodEntity;


public interface GoodService extends IService<GoodEntity> {
}

（2.1）GoodServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.GoodDao;
import com.example.demo.entity.GoodEntity;
import com.example.demo.service.GoodService;
import org.springframework.stereotype.Service;

@Service("goodService")
public class GoodServiceImpl extends ServiceImpl<GoodDao, GoodEntity> implements GoodService {
}

（3）OrderDayCountService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.OrderDayCountEntity;

public interface OrderDayCountService extends IService<OrderDayCountEntity> {
}

（3.1）OrderDayCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.OrderDayCountDao;
import com.example.demo.entity.OrderDayCountEntity;
import com.example.demo.service.OrderDayCountService;
import org.springframework.stereotype.Service;

@Service("orderdaycountService")
public class OrderDayCountServiceImpl extends ServiceImpl<OrderDayCountDao, OrderDayCountEntity> implements OrderDayCountService {
}

（4）ProductSaleTopNService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.ProductSaleTopNEntity;

public interface ProductSaleTopNService extends IService<ProductSaleTopNEntity> {
}

（4.1）ProductSaleTopNServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.ProductSaleTopNDao;
import com.example.demo.entity.ProductSaleTopNEntity;
import com.example.demo.service.ProductSaleTopNService;
import org.springframework.stereotype.Service;

@Service("productsaletopNService")
public class ProductSaleTopNServiceImpl extends ServiceImpl<ProductSaleTopNDao, ProductSaleTopNEntity> implements ProductSaleTopNService {
}

（5）UserActionCountService

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.demo.entity.UserActionCountEntity;

public interface UserActionCountService extends IService<UserActionCountEntity> {
}

（5.1）UserActionCountServiceImpl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.demo.dao.UserActionCountDao;
import com.example.demo.entity.UserActionCountEntity;
import com.example.demo.service.UserActionCountService;
import org.springframework.stereotype.Service;

@Service("useractioncountService")
public class UserActionCountServiceImpl extends ServiceImpl<UserActionCountDao, UserActionCountEntity> implements UserActionCountService {
}

4.4.4controller

按照下圖的布局在controller包下面創(chuàng)建java類文件；

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

（1）AreaTopicController

import com.example.demo.entity.AreaTopicEntity;
import com.example.demo.service.AreaTopicService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("areatopic")
public class AreaTopicController {
    @Autowired
    private AreaTopicService areaTopicService;

    @RequestMapping("list")
    public List<AreaTopicEntity> list(){
        return areaTopicService.list();
    }
}

（2） GoodController

import com.example.demo.entity.GoodEntity;
import com.example.demo.service.GoodService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("goods")
public class GoodController {

    @Autowired
    private GoodService goodService;

    @RequestMapping("list")
    public List<GoodEntity> list() {

        return goodService.list();
    }
}

（3）OrderDayCountController

import com.example.demo.entity.OrderDayCountEntity;
import com.example.demo.service.OrderDayCountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("orderdaycount")
public class OrderDayCountController {

    @Autowired
    private OrderDayCountService orderdaycountService;

    @RequestMapping("list")
    public List<OrderDayCountEntity> list(){
        return orderdaycountService.list();
    }
}

（4）ProductSaleTopNController

import com.example.demo.entity.ProductSaleTopNEntity;
import com.example.demo.service.ProductSaleTopNService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("productsaletopN")
public class ProductSaleTopNController {

    @Autowired
    private ProductSaleTopNService productSaleTopNService;

    @RequestMapping("list")
    public List<ProductSaleTopNEntity> list(){
        return productSaleTopNService.list();
    }
}

（5）UserActionCountController

import com.example.demo.entity.UserActionCountEntity;
import com.example.demo.service.UserActionCountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("useractioncount")
public class UserActionCountController {

    @Autowired
    private UserActionCountService userActionCountService;
    @RequestMapping("list")
    public List<UserActionCountEntity> list(){
        return userActionCountService.list();
    }
}

4.5測試

1）點擊啟動項目

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?2）啟動成功樣式

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?3）進(jìn)入瀏覽器，測試接口

http://localhost:8080/areatopic/list
http://localhost:8080/goods/list
http://localhost:8080/orderdaycount/list
http://localhost:8080/productsaletopN/list
http://localhost:8080/useractioncount/list

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?注：

注意查看數(shù)據(jù)，都出現(xiàn)數(shù)據(jù)說明上面的代碼沒有問題！?

如果有數(shù)據(jù)為空，先檢查mysql數(shù)據(jù)庫的數(shù)據(jù)有沒有問題，沒有問題再檢查相應(yīng)的entity的代碼；

注意，如果數(shù)據(jù)庫表的列名中有下劃線，entity中下劃線的后一位要用大寫，不能用下劃線；

比如：

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

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

五、前端代碼編寫

5.1準(zhǔn)備

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

1)通過以下官網(wǎng)可以找到：

下載 - Apache ECharts

Download jQuery | jQuery

jquery下載所有版本（實時更新）

2)知道大家下載麻煩，我已經(jīng)準(zhǔn)備了好了，內(nèi)含用到的css!免費(fèi)下載哦！

echarts，jQuery文件-Javascript文檔類資源-CSDN下載

5.2創(chuàng)建包

按照下面結(jié)構(gòu)創(chuàng)建相應(yīng)的文件和文件夾；

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

?5.3代碼編寫

5.3.1配置靜態(tài)資源訪問

在properties.yml中添加

resources:
  web:
    resources:
      static-locations: classpath:/templates/, classpath:/static/

5.3.2在templates目錄下創(chuàng)建HTML文件

k.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 450px;height:200px;"></div>
<script type="text/javascript">

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    var data = [
        {
            name: 'Grandpa',
            children: [
                {
                    name: 'Uncle Leo',
                    value: 15,
                    children: [
                        {
                            name: 'Cousin Jack',
                            value: 2
                        },
                        {
                            name: 'Cousin Mary',
                            value: 5,
                            children: [
                                {
                                    name: 'Jackson',
                                    value: 2
                                }
                            ]
                        },
                        {
                            name: 'Cousin Ben',
                            value: 4
                        }
                    ]
                },
                {
                    name: 'Father',
                    value: 10,
                    children: [
                        {
                            name: 'Me',
                            value: 5
                        },
                        {
                            name: 'Brother Peter',
                            value: 1
                        }
                    ]
                }
            ]
        },
        {
            name: 'Nancy',
            children: [
                {
                    name: 'Uncle Nike',
                    children: [
                        {
                            name: 'Cousin Betty',
                            value: 1
                        },
                        {
                            name: 'Cousin Jenny',
                            value: 2
                        }
                    ]
                }
            ]
        }
    ];
    option = {
        series: {

            type: 'sunburst',
            data: data,
            radius: [60, '90%'],
            itemStyle: {
                borderRadius: 7,
                borderWidth: 2
            },
            label: {
                show: false
            }
        }
    };

    option && myChart.setOption(option);

</script>
</body>

pie.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餅狀圖</title>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>

<body>
<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width:450px; height:200px;"></div>
<script type="text/javascript">
    window.onload = function pie() {
        // 基于準(zhǔn)備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));


        myChart.showLoading();    //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
        //聲明一個對象
        var list = [];
        var nus = [];
        $.ajax({
            async: true,            //異步請求
            data: {},
            //請求方式get
            type: "GET",
            //請求地址
            url: "/productsaletopN/list",
            //數(shù)據(jù)，json字符串
            dataType: "json",
            //請求成功
            success: function (result) {
                console.log(result);
                //進(jìn)行數(shù)據(jù)的遍歷
                $.each(result, function (index, item) {
                    //添加數(shù)據(jù)到對象
                    //物品名
                    list.push(item.skuId);
                    //物品名和數(shù)量
                    nus.push({
                        value: item.paymentAmount,
                        name: item.skuId
                    });
                });
                console.log(list);
                console.log(nus);
                myChart.hideLoading();    //隱藏加載動畫

                var option = {
                    title: {
                        text: '',
                        left: 'center'
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>: {c} (n5n3t3z%)'
                        // 計算占比%
                    },

                    legend: {                 //旁邊的小標(biāo)圖
                        orient: 'vertical',
                        right: 10,
                        top: 300,
                        //添加物品名
                        data: list
                    },
                    series: [
                        {
                            name: '訪問來源',
                            type: 'pie',     // 設(shè)置圖表類型為餅圖
                            radius: '55%',      //餅圖的半徑，外半徑為可視區(qū)尺寸的長度。
                            // roseType: 'angle',           //設(shè)置圖表類型為南丁格爾圖
                            avoidLabelOverlap: false,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                lineStyle: {
                                    color: ''
                                    // color: 'rgba(200, 0, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20

                            },

                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    color:function(params) {
                                        //自定義顏色
                                        var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },

                            data: nus
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                //請求失敗時執(zhí)行該函數(shù)
                alert("圖表請求數(shù)據(jù)失敗!");
                myChart.hideLoading();
            }
        });
    };
</script>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 450px;height:200px;"></div>
<script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數(shù)據(jù)
    var option = {
        title: {
            text: ''
        },

        legend: {
            data:['銷售額']
        },
        xAxis: {
            data: {}
        },
        yAxis: {},
        series: [{
            name: '銷售額',
            type: 'bar',
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal:{
                    color:function(params) {
                        //自定義顏色
                        var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                        return colorList[params.dataIndex]
                    }
                }
            },
            data: {}
        }]
    };

    var names=[];
    var nums=[];

    $.ajax({
        type: "get",
        url: "/productsaletopN/list",
        contentType: "application/json",
        success: function (res) {
            console.log("====res：=====")
            console.log(res);
            for (var i = 0; i < res.length; i++) {
                names.push(res[i].skuId);
                nums.push(res[i].paymentAmount);
            }
            myChart.setOption({
                xAxis: {data: names},
                series: [{name: '銷售額',
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal:{
                            color:function(params) {
                                //自定義顏色
                                var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    data: nums}]
            });
        }
    });

    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
</script>
</body>

line.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 700px;height:300px;"></div>
<script type="text/javascript">
    // 基于準(zhǔn)備好的dom，初始化echarts實例
    // var myChart = echarts.init(document.getElementById('main'));
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    var dts=[];
    var homeCounts=[];
    var goodDetailCounts=[];
    var goodDetail2cartConvertRatios=[];
    var cart2orderConvertRatios=[];
    var order2paymentConvertRatios=[];

    var cartCouns=[];
    var orderCounts=[];
    var paymentAmounts=[];


    $.ajax({
        type: "get",
        url: "/useractioncount/list",
        contentType: "application/json",
        success: function (res) {
            console.log("====res：=====")
            console.log(res);
            for (var i = 0; i < res.length; i++) {
                dts.push(res[i].dt);
                homeCounts.push(res[i].homeCount);
                goodDetailCounts.push(res[i]. goodDetailCount);
                goodDetail2cartConvertRatios.push(res[i].goodDetail2cartConvertRatio);
                cart2orderConvertRatios.push(res[i].cart2orderConvertRatio);
                order2paymentConvertRatios.push(res[i].order2paymentConvertRatio);
                cartCouns.push(res[i].cartCoun);
                orderCounts.push(res[i].orderCount);
                paymentAmounts.push(res[i].paymentAmount);
            };

            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['homeCount', 'goodDetailCount', 'goodDetail2cartConvertRatio', 'cart2orderConvertRatio', 'order2paymentConvertRatio','cartCoun','orderCounts','paymentAmount']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:dts
                },
                yAxis: {
                    type: 'value'
                },

                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        color:function(params) {
                            //自定義顏色
                            var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                series: [

                    {
                        name: 'homeCount',
                        type: 'line',
                        stack: 'Total',
                        data: homeCounts
                    },
                    {
                        name: 'goodDetailCount',
                        type: 'line',
                        stack: 'Total',
                        data: goodDetailCounts
                    },
                    {
                        name: 'goodDetail2cartConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: goodDetail2cartConvertRatios
                    },
                    {
                        name: 'cart2orderConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: cart2orderConvertRatios
                    },
                    {
                        name: 'cartCoun',
                        type: 'line',
                        stack: 'Total',
                        data: cartCouns
                    },
                    {
                        name: 'orderCount',
                        type: 'line',
                        stack: 'Total',
                        data: orderCounts
                    },
                    {
                        name: 'paymentAmount',
                        type: 'line',
                        stack: 'Total',
                        data: paymentAmounts
                    },
                    {
                        name: 'order2paymentConvertRatio',
                        type: 'line',
                        stack: 'Total',
                        data: order2paymentConvertRatios
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    });

</script>
</body>

map.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地圖</title>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/JS/china.js"></script>

</head>
<body >
<div id="box" style="width: 700px; height: 300px;"></div>
<script>
    // 初始化echarts實例
    var myEcharts = echarts.init(document.getElementById("box"));

    var option = {
        title: {  //標(biāo)題樣式
            text: '全國消費(fèi)水平分布',
            x: "center",
            textStyle: {
                fontSize: 18,
                color: "cornsilk"
            },
        },
        tooltip: {  //這里設(shè)置提示框
            trigger: 'item',  //數(shù)據(jù)項圖形觸發(fā)
            backgroundColor: "red",  //提示框浮層的背景顏色。
            //字符串模板(地圖): {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）,n5n3t3z（無）
            formatter: '地區(qū)：<br/>模擬數(shù)據(jù)：{c}'
        },
        visualMap: {//視覺映射組件
            top: 'center',
            left: 'left',
            min: 10,
            max: 500000,
            text: ['High', 'Low'],
            realtime: false,  //拖拽時，是否實時更新
            calculable: true,  //是否顯示拖拽用的手柄
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '模擬數(shù)據(jù)',
                type: 'map',
                mapType: 'china',
                roam: false,//是否開啟鼠標(biāo)縮放和平移漫游
                itemStyle: {//地圖區(qū)域的多邊形 圖形樣式
                    normal: {//是圖形在默認(rèn)狀態(tài)下的樣式
                        label: {
                            show: true,//是否顯示標(biāo)簽
                            textStyle: {
                                color: "black"
                            }
                        }
                    },
                    zoom: 1.5,  //地圖縮放比例,默認(rèn)為1
                    emphasis: {//是圖形在高亮狀態(tài)下的樣式,比如在鼠標(biāo)懸浮或者圖例聯(lián)動高亮?xí)r
                        label: { show: true }
                    }
                },
                top: "3%",//組件距離容器的距離
                data: [
                    { name: '北京', value: 350000 },
                    { name: '天津', value: 120000 },
                    { name: '上海', value: 300000 },
                    { name: '重慶', value: 92000 },
                    { name: '河北', value: 25000 },
                    { name: '河南', value: 20000 },
                    { name: '云南', value: 500 },
                    { name: '遼寧', value: 3050 },
                    { name: '黑龍江', value: 80000 },
                    { name: '湖南', value: 2000 },
                    { name: '安徽', value: 24580 },
                    { name: '山東', value: 40629 },
                    { name: '新疆', value: 36981 },
                    { name: '江蘇', value: 13569 },
                    { name: '浙江', value: 24956 },
                    { name: '江西', value: 15194 },
                    { name: '湖北', value: 41398 },
                    { name: '廣西', value: 41150 },
                    { name: '甘肅', value: 17630 },
                    { name: '山西', value: 27370 },
                    { name: '內(nèi)蒙古', value: 27370 },
                    { name: '陜西', value: 97208 },
                    { name: '吉林', value: 88290 },
                    { name: '福建', value: 19978 },
                    { name: '貴州', value: 94485 },
                    { name: '廣東', value: 89426 },
                    { name: '青海', value: 35484 },
                    { name: '西藏', value: 97413 },
                    { name: '四川', value: 54161 },
                    { name: '寧夏', value: 56515 },
                    { name: '海南', value: 54871 },
                    { name: '臺灣', value: 48544 },
                    { name: '香港', value: 49474 },
                    { name: '澳門', value: 34594 }
                ]
            }
        ]
    };
    // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
    myEcharts.setOption(option);
</script>
</body>

bar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>虛擬柱狀圖</title>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 450px;height:200px;"></div>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    // Generate data
    let category = [];
    let dottedBase = +new Date();
    let lineData = [];
    let barData = [];
    for (let i = 0; i < 20; i++) {
        let date = new Date((dottedBase += 3600 * 24 * 1000));
        category.push(
            [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
        );
        let b = Math.random() * 200;
        let d = Math.random() * 200;
        barData.push(b);
        lineData.push(d + b);
    }
    // option
    option = {
        backgroundColor: '',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['line', 'bar'],
            textStyle: {
                color: '#ccc'
            }
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [
            {
                name: 'line',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 5,
                data: lineData
            },
            {
                name: 'bar',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    borderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#14c8d4' },
                        { offset: 1, color: '#43eec6' }
                    ])
                },
                data: barData
            },
            {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(20,200,212,0.5)' },
                        { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                        { offset: 1, color: 'rgba(20,200,212,0)' }
                    ])
                },
                z: -12,
                data: lineData
            },
            {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    color: '#0f375f'
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }
        ]
    };

    option && myChart.setOption(option);

</script>
</body>
bar-trend.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 450px;height:200px;"></div>
<script type="text/javascript">

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    let xAxisData = [];
    let data1 = [];
    let data2 = [];
    let data3 = [];
    let data4 = [];
    for (let i = 0; i < 10; i++) {
        xAxisData.push('Class' + i);
        data1.push(+(Math.random() * 2).toFixed(2));
        data2.push(+(Math.random() * 5).toFixed(2));
        data3.push(+(Math.random() + 0.3).toFixed(2));
        data4.push(+Math.random().toFixed(2));
    }
    var emphasisStyle = {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    };
    option = {
        legend: {
            data: ['bar', 'bar2', 'bar3', 'bar4'],
            left: '10%'
        },
        brush: {
            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            xAxisIndex: 0
        },
        toolbox: {
            feature: {
                magicType: {
                    type: ['stack']
                },
                dataView: {}
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            name: 'X Axis',
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false }
        },
        yAxis: {},
        grid: {
            bottom: 100
        },
        series: [
            {
                name: 'bar',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data1
            },
            {
                name: 'bar2',
                type: 'bar',
                stack: 'one',
                emphasis: emphasisStyle,
                data: data2
            },
            {
                name: 'bar3',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                data: data3
            },
            {
                name: 'bar4',
                type: 'bar',
                stack: 'two',
                emphasis: emphasisStyle,
                data: data4
            }
        ]
    };
    myChart.on('brushSelected', function (params) {
        var brushed = [];
        var brushComponent = params.batch[0];
        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex;
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
        }
        myChart.setOption({
            title: {
                backgroundColor: '#333',
                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                bottom: 0,
                right: '10%',
                width: 100,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            }
        });
    });

    option && myChart.setOption(option);


</script>
</body>
bar-negative.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
<div id="main" style="width: 450px;height:200px;"></div>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Profit', 'Expenses', 'Income']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value'
            }
        ],
        yAxis: [
            {
                type: 'category',
                axisTick: {
                    show: false
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        series: [
            {
                name: 'Profit',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
                emphasis: {
                    focus: 'series'
                },
                data: [200, 170, 240, 244, 200, 220, 210]
            },
            {
                name: 'Income',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        color:function(params) {
                            //自定義顏色
                            var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                data: [320, 302, 341, 374, 390, 450, 420]
            },
            {
                name: 'Expenses',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'left'
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        color:function(params) {
                            //自定義顏色
                            var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            }
        ]
    };

    option && myChart.setOption(option);

</script>
</body>

endindex.html

<!DOCTYPE html>
<!-- saved from url=(0047)http://yuanbaoshuju.com/bigscreen/17/index.html -->
<html lang="en" style="font-size: 66.4062px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript"></script><style type="text/css"></style>
    <link rel="stylesheet" href="./JS/style.css">
    <title>數(shù)據(jù)倉庫可視化展示</title>

</head>

<body>
    <div class="container-flex" tabindex="0" hidefocus="true">
        <div class="box-left">
            <div class="left-top" width="300px" height="200">
                <br/>
                <div class="title-box">
                    <h6>銷售環(huán)</h6>
                </div>
                <div id="html_7">
                    <iframe align="center" width="650" height="200" src="k.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div class="title-box">
                    <h6>商品銷售額統(tǒng)計</h6>
                </div>
                <div id="html_1">
                    <iframe align="center" width="650" height="200" src="pie.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div class="title-box">
                    <h6>銷量統(tǒng)計</h6>
                </div>
                <div id="html_2">
                    <iframe align="center" width="650" height="200" src="index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
            </div>
        </div>

        <div class="box-center">
            <div class="center">
                <font size="30" class="center-top">數(shù)據(jù)倉庫可視化展示</font>
            </div>
            <div class="center">
                <div class="title-box">
                    <h6></h6>
                </div>
                <div class="title-box">
                    <h6></h6>
                </div>
                <div id="html_3">
                    <iframe align="center" width="650" height="300" src="line.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div class="title-box">
                    <h6></h6>
                </div>
                <div id="html_5">
                    <iframe align="center" width="650" height="300" src="map.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
            </div>
        </div>

        <div class="box-right">
            <div class="right-top">
                <br/>
                <div class="title-box">
                    <h6>虛擬消費(fèi)</h6>
                </div>
                <div id="html_6">
                    <iframe align="center" width="650" height="200" src="bar.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div id="html_8">
                    <iframe align="center" width="650" height="200" src="bar-trend.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
                <div id="html_9">
                    <div class="title-box">
                        <h6>收益情況</h6>
                    </div>
                    <iframe align="center" width="650" height="200" src="bar-negative.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="./JS/china.js"></script>

</body>
</html>

5.4測試

1）運(yùn)行項目

2）進(jìn)入瀏覽器

http://localhost:8080/endindex.html

spring + 可視化大屏,項目,可視化,大數(shù)據(jù),數(shù)據(jù)倉庫,javascript?

說明：為了偷懶，只有pie.html，????????index.html，????????line.html調(diào)用了mysql的數(shù)據(jù)，其他的數(shù)據(jù)是手敲的。

注：

http://localhost:8080/加上HTML的文件名都能夠查看相應(yīng)的圖！

要碼源的私聊我

作者水平低，如有錯誤，懇請指正！謝謝?。。。?！

到了這里，關(guān)于springboot+mybatis+echarts +mysql制作數(shù)據(jù)可視化大屏的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 編寫web程序，基于echarts將Mysql表數(shù)據(jù)進(jìn)行可視化展示及Hadoop學(xué)習(xí)心得

    編寫web程序，基于echarts將Mysql表數(shù)據(jù)進(jìn)行可視化展示及Hadoop學(xué)習(xí)心得

    文章目錄 目錄 前言 一、從MySQL數(shù)據(jù)庫中獲取需要展示的數(shù)據(jù)。 1.引入庫 2.連接到MySQL數(shù)據(jù)庫 二、創(chuàng)建圖表 三、運(yùn)行后結(jié)果展示 四、學(xué)習(xí)心得? 總結(jié) ? ? ? ??將Mysql表數(shù)據(jù)可視化展示在Web程序中可以借助ECharts這樣的圖表庫來實現(xiàn)。通過Web程序連接MySQL數(shù)據(jù)庫，獲取數(shù)據(jù)后，

    2024年02月03日
    瀏覽(20)
  • 【Python大數(shù)據(jù)期末/課程設(shè)計】動態(tài)爬取“縱橫中文網(wǎng)“小說排行榜數(shù)據(jù)并進(jìn)行可視化處理 (flask框架/MySQL數(shù)據(jù)庫/echarts數(shù)據(jù)可視化)

    【Python大數(shù)據(jù)期末/課程設(shè)計】動態(tài)爬取“縱橫中文網(wǎng)“小說排行榜數(shù)據(jù)并進(jìn)行可視化處理 (flask框架/MySQL數(shù)據(jù)庫/echarts數(shù)據(jù)可視化)

    代寫C語言、C++、Java、Python、HTML、JavaScript、vue、MySQL相關(guān)編程作業(yè)， 長期接單，信譽(yù)有保證，標(biāo)價10-20每份，如有需要請加文章最下方QQ。 本文資源：https://download.csdn.net/download/weixin_47040861/89149396 題目描述： 爬取“縱橫中文網(wǎng)” 1.利用爬蟲技術(shù)爬取完整的一千條數(shù)據(jù). 2.將爬

    2024年04月25日
    瀏覽(37)
  • 基于Django+Mysql+Echarts的可視化大屏開發(fā)

    基于Django+Mysql+Echarts的可視化大屏開發(fā)

    課程實驗作業(yè)，臨時趕出來的一個可視化大屏，后端是Django實現(xiàn)的web框架+Mysql數(shù)據(jù)庫；前端（HTML+CSS+JS）三劍客，圖表控件Echarts；本人很菜，，，做的比較潦草，還請多多包涵！ github項目地址：https://github.com/goldikfish/Bigscreen.git 運(yùn)行效果如圖 數(shù)據(jù)源自國家數(shù)據(jù)統(tǒng)計局 ，將數(shù)

    2024年02月11日
    瀏覽(25)
  • Echarts數(shù)據(jù)可視化 第4章 Echarts可視化圖 4.10 熱力圖

    Echarts數(shù)據(jù)可視化 第4章 Echarts可視化圖 4.10 熱力圖

    Echarts數(shù)據(jù)可視化 Echarts數(shù)據(jù)可視化：入門、實戰(zhàn)與進(jìn)階 第4章 Echarts可視化圖 4.10 熱力圖 熱力圖是一種密度圖，使用不同顏色和不同顏色深淺程度來表示數(shù)據(jù)量的區(qū)別。 舉個栗子 渲染效果 解釋一下這個圖 其中橫軸代表小時，縱軸表示星期幾，圖中不同顏色的區(qū)塊代表了數(shù)據(jù)

    2024年02月14日
    瀏覽(26)
  • ECharts數(shù)據(jù)可視化

    ECharts數(shù)據(jù)可視化

    目錄 第一章 什么是ECharts 第二章 搭建環(huán)境? 2.1 Echarts的下載 2.2 Visual Studio Code下載 第三章 一個簡單的可視化展示 第四章 Echarts組件 4.1 標(biāo)題 4.2 提示框 4.3 工具欄 4.4 圖例 4.5 時間軸 4.6 數(shù)據(jù)區(qū)域縮放 4.6.1?滑動條型數(shù)據(jù)區(qū)域縮放 4.6.2?內(nèi)置型數(shù)據(jù)區(qū)域縮放? ??4.6.3?框選型數(shù)據(jù)

    2024年02月10日
    瀏覽(45)
  • 數(shù)據(jù)可視化一、ECharts

    數(shù)據(jù)可視化一、ECharts

    1、數(shù)據(jù)可視化 （1）數(shù)據(jù)可視化 數(shù)據(jù)可視化主要目的：借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。 數(shù)據(jù)可視化可以把數(shù)據(jù)從冰冷的數(shù)字轉(zhuǎn)換成圖形，揭示蘊(yùn)含在數(shù)據(jù)中的規(guī)律和道理。 （2）數(shù)據(jù)可視化的場景 目前互聯(lián)網(wǎng)公司通常有這么幾大類的可視化需求： （3）常見

    2024年02月05日
    瀏覽(28)
  • 基于Echarts的大數(shù)據(jù)可視化模板：大數(shù)據(jù)可視化展板

    基于Echarts的大數(shù)據(jù)可視化模板：大數(shù)據(jù)可視化展板

    2024年02月01日
    瀏覽(37)
  • ECharts數(shù)據(jù)可視化--常用圖表類型

    ECharts數(shù)據(jù)可視化--常用圖表類型

    目錄 一.柱狀圖 1.基本柱狀圖 ?1.1最簡單的柱狀圖 ?編輯 ??1.2多系列柱狀圖? ?1.3柱狀圖的樣式? ? ? ? ? （1）柱條樣式 ? ? ? ?? ????????（2）柱條的寬度和高度 ? ? ? ? （3）柱條間距 ? ? ? ? （4）為柱條添加背景顏色 ?編輯 2.堆疊柱狀圖 3.動態(tài)排序柱狀圖 4.階梯

    2024年02月05日
    瀏覽(30)
  • 構(gòu)建數(shù)據(jù)可視化（基于Echarts,python)

    構(gòu)建數(shù)據(jù)可視化（基于Echarts,python)

    本文目錄： 一、寫在前面的題外話 二、數(shù)據(jù)可視化概念 三、用Python matplotlib庫繪制數(shù)據(jù)可視化圖 四、基于Echarts構(gòu)建大數(shù)據(jù)可視化 4.1、安裝echarts.js 4.2、數(shù)據(jù)可視化折線圖制作 4.2.1、基礎(chǔ)折線圖 4.2.2、改善折線圖 4.2.3、平滑折線圖 4.2.4、虛線折線圖 4.2.5、階梯折線圖 4.2.6、面

    2024年02月11日
    瀏覽(22)
  • 基于Echarts構(gòu)建大數(shù)據(jù)招聘崗位數(shù)據(jù)可視化大屏

    基于Echarts構(gòu)建大數(shù)據(jù)招聘崗位數(shù)據(jù)可視化大屏

    ???♂? 個人主頁：@艾派森的個人主頁 ???作者簡介：Python學(xué)習(xí)者 ?? 希望大家多多支持，我們一起進(jìn)步！?? 如果文章對你有幫助的話， 歡迎評論 ??點贊???? 收藏 ??加關(guān)注+ 目錄 1.項目背景 2.項目簡介 3.項目流程 3.1整體布局 3.2左邊布局 3.3中間布局? 3.4右邊布局 ?

    2024年02月03日
    瀏覽(25)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包