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

• 大数据

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

目录

一、数据源

二、所需工具

三、项目框架搭建

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

成果展示：

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

一、数据源

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

2）使用我提供的数据。（免费下载）

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

二、所需工具

MySQL

IDEA

jdk1.8

Maven

三、项目框架搭建

3.1新建springboot项目

创建springboot项目有二种方式：

1）在IDEA中创建

2）在官网上创建

我喜欢在官网创建

3.1.1进入官网

官网地址（记得收藏）：

https://start.spring.io/

3.1.2创建项目

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

 注：

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

2）在1.处点击添加相关依赖；

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

下面给出我的配置信息：

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

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

四、后端代码编写

4.1根据需求修改pom.xml

我的pom.xml：


   4.0.0
   
      org.springframework.boot
      spring-boot-starter-parent
      2.7.1
       
   
   com.example
   demo
   0.0.1-SNAPSHOT
   demo
   Demo project for Spring Boot
   
      1.8
   
   
      
         org.springframework.boot
         spring-boot-starter-web
      

      
         org.mybatis.spring.boot
         mybatis-spring-boot-starter
         2.2.2
      

      
         com.baomidou
         mybatis-plus-boot-starter
         3.1.2
      

      
         org.springframework.boot
         spring-boot-devtools
         runtime
         true
      

      
         mysql
         mysql-connector-java
      

      
         org.projectlombok
         lombok
         true
         1.18.4
      

      
         org.springframework.boot
         spring-boot-starter-test
         test
      

      
         org.springframework.boot
         spring-boot-starter-thymeleaf
      

   

   
      
         
            org.springframework.boot
            spring-boot-maven-plugin
            
               
                  
                     org.projectlombok
                     lombok
                  
               
            
         
      
   
1）

4.2配置数据源

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

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

2） 在application.yml中添加内容：

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

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

（1）192.168.17.XXX是我的MySQL所在计算机的IP地址，要修改成你的；

（2）3306:是端口号；

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

（4）root是MySQL的用户名，123456是用户相应的密码；

4.3创建目录结构

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

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

4.4后端编写代码

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

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

4.4.1entity类

在entity包下面创建java类，如下图；

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

（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包下面创建java接口文件；

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

 （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 {
}

（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 {
}

（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 {
}

（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 {
}

（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 {
}

4.4.3service

1）在service包下创建一个impl包；

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

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

（1）AreaTopicService

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

public interface AreaTopicService extends IService {
}

（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 implements AreaTopicService {
}

（2）GoodService

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


public interface GoodService extends IService {
}

（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 implements GoodService {
}

（3）OrderDayCountService

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

public interface OrderDayCountService extends IService {
}

（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 implements OrderDayCountService {
}

（4）ProductSaleTopNService

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

public interface ProductSaleTopNService extends IService {
}

（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 implements ProductSaleTopNService {
}

（5）UserActionCountService

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

public interface UserActionCountService extends IService {
}

（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 implements UserActionCountService {
}

4.4.4controller

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

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

（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 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 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 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 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 list(){
        return userActionCountService.list();
    }
}

4.5测试

1）点击启动项目

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

 2）启动成功样式

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

 3）进入浏览器，测试接口

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

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

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

 注：

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

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

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

比如：

id_user ———>idUser

gmall_ip_use ————–>gmallIpUse

五、前端代码编写

5.1准备

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

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

下载 – Apache ECharts

Download jQuery | jQuery

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

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

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

5.2创建包

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

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

 5.3代码编写

5.3.1配置静态资源访问

在properties.yml中添加

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

5.3.2在templates目录下创建HTML文件

k.html



    
    柱状图
    
    
    






    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);

pie.html




    
    
    饼状图
    
    






    window.onload = function pie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        //声明一个对象
        var list = [];
        var nus = [];
        $.ajax({
            async: true,            //异步请求
            data: {},
            //请求方式get
            type: "GET",
            //请求地址
            url: "/productsaletopN/list",
            //数据，json字符串
            dataType: "json",
            //请求成功
            success: function (result) {
                console.log(result);
                //进行数据的遍历
                $.each(result, function (index, item) {
                    //添加数据到对象
                    //物品名
                    list.push(item.skuId);
                    //物品名和数量
                    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} 
{b}: {c} ({d}%)'
                        // 计算占比%
                    },

                    legend: {                 //旁边的小标图
                        orient: 'vertical',
                        right: 10,
                        top: 300,
                        //添加物品名
                        data: list
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',     // 设置图表类型为饼图
                            radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
                            // roseType: 'angle',           //设置图表类型为南丁格尔图
                            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) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };

index.html



    
    柱状图
    
    
    





    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    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}]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

line.html



    
    ECharts
    
    
    





    // 基于准备好的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);
        }
    });

map.html



    
    地图
    
    
    





    // 初始化echarts实例
    var myEcharts = echarts.init(document.getElementById("box"));

    var option = {
        title: {  //标题样式
            text: '全国消费水平分布',
            x: "center",
            textStyle: {
                fontSize: 18,
                color: "cornsilk"
            },
        },
        tooltip: {  //这里设置提示框
            trigger: 'item',  //数据项图形触发
            backgroundColor: "red",  //提示框浮层的背景颜色。
            //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
            formatter: '地区：{b}
模拟数据：{c}'
        },
        visualMap: {//视觉映射组件
            top: 'center',
            left: 'left',
            min: 10,
            max: 500000,
            text: ['High', 'Low'],
            realtime: false,  //拖拽时，是否实时更新
            calculable: true,  //是否显示拖拽用的手柄
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '模拟数据',
                type: 'map',
                mapType: 'china',
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle: {//地图区域的多边形 图形样式
                    normal: {//是图形在默认状态下的样式
                        label: {
                            show: true,//是否显示标签
                            textStyle: {
                                color: "black"
                            }
                        }
                    },
                    zoom: 1.5,  //地图缩放比例,默认为1
                    emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        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: '内蒙古', 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 }
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(option);

bar.html



    
    虚拟柱状图
    
    




    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);



bar-trend.html



    
    柱状图
    
    
    






    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);




bar-negative.html


    
    柱状图
    
    
    





    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);

endindex.html




    
    
    
    

    
    
    数据仓库可视化展示




    
        
            
                

                
                    
销售环

                
                
                    
                
                
                    
商品销售额统计

                
                
                    
                
                
                    
销量统计

                
                
                    
                
            
        

        
            
                数据仓库可视化展示
            
            
                
                    

                
                
                    

                
                
                    
                
                
                    

                
                
                    
                
            
        

        
            
                

                
                    
虚拟消费

                
                
                    
                
                
                    
                
                
                    
                        
收益情况

5.4测试

1）运行项目

2）进入浏览器

http://localhost:8080/endindex.html

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

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

注：

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

要码源的私聊我

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/46c7aee740.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐