• SpringBoot+百度地图+Mysql实现中国地图可视化

            通过SpringBoot+百度地图+Mysql实现中国地图可视化

    一、申请百度地图的ak值

            进入百度开发者平台

    编辑以下内容

    然后申请成功

    二、Springboot写一个接口

    确保数据库里有数据

    文件目录如下

    1、配置application.properties文件

    1. #访问端口号
    2. server.port=9090
    3. # 数据库连接信息
    4. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    5. spring.datasource.url=jdbc:mysql://localhost:3306/JobData?serverTimezone=UTC
    6. spring.datasource.username=root
    7. spring.datasource.password=1234
    8. # 连接池配置
    9. spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
    10. spring.datasource.druid.initial-size=20
    11. spring.datasource.druid.min-idle=10
    12. spring.datasource.druid.max-active=100
    13. # 实体类使用驼峰命名。数据库使用下划线
    14. mybatis.configuration.map-underscore-to-camel-case=true

    2、配置pom.xml文件

    1.    
    2.         spring-boot-test
    3.         org.springframework.boot
    4.         2.1.3.RELEASE
    5.     
    6.  
    7.  
    9.         
    10.             org.springframework.boot
    11.             spring-boot-starter-web
    12.         
    13.  
    14.         
    15.         
    16.             org.springframework.boot
    17.             spring-boot-starter-thymeleaf
    18.         
    19.         
    20.         
    21.             org.projectlombok
    22.             lombok
    23.             1.18.22
    24.         
    25.         
    26.         
    27.             org.mybatis.spring.boot
    28.             mybatis-spring-boot-starter
    29.             2.1.1
    30.         
    31.         
    32.             mysql
    33.             mysql-connector-java
    34.             runtime
    35.         
    36.         
    37.             com.alibaba
    38.             druid-spring-boot-starter
    39.             1.1.10
    40.         
    41.         
    42.         
    43.             org.mybatis.spring.boot
    44.             mybatis-spring-boot-starter
    45.             2.2.0
    46.         
    47.         
    48.         
    49.             com.baomidou
    50.             mybatis-plus-boot-starter
    51.             3.1.2
    52.

    3、编写com/App.java启动类

    1. package com;
    2.  
    3. import org.springframework.boot.SpringApplication;
    4. import org.springframework.boot.autoconfigure.SpringBootApplication;
    5.  
    6. @SpringBootApplication
    7. public class App {
    8.     // 调用SpringApplication的run方法来启动Spring Boot应用程序。
    9.     // 传入的App.class参数指定了应用程序的启动类。
    10.     public static void main(String[] args) {
    11.         SpringApplication.run(App.class);
    12.     }
    13. }

    4、编写controller/CityController.java

    1. package com.controller;
    2.  
    3. import com.entity.CityEntity;
    4. import com.service.CityService;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.util.List;
    10.  
    11. @RestController
    12. @RequestMapping("city")
    13. public class CityController {
    14.  
    15.     @Autowired
    16.     private CityService cityService;
    17.  
    18.     @RequestMapping("list")
    19.     public List list() {
    20.  
    21.         return cityService.list();
    22.     }
    23. }

    5、编写

    5、编写dao/CityDao.java

    1. package com.dao;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import com.entity.CityEntity;
    5. import org.apache.ibatis.annotations.Mapper;
    6.  
    7. @Mapper
    8. public interface CityDao extends BaseMapper {
    9.  
    10. }

    6、编写entity/CityEntity.java

     封装数据库字段信息

    1. package com.entity;
    2.  
    3. import com.baomidou.mybatisplus.annotation.TableName;
    4. import lombok.*;
    5.  
    6. @NoArgsConstructor
    7. @AllArgsConstructor
    8. @Getter
    9. @Setter
    10. @Data
    11. @TableName("t_city_count")  //数据库表名
    12. public class CityEntity {
    13.     private String city;
    14.     private int count;
    15. }

    7、编写service/CityService.java

    1. package com.service;
    2.  
    3. import com.baomidou.mybatisplus.extension.service.IService;
    4. import com.entity.CityEntity;
    5.  
    6. public interface CityService extends IService {
    7. }

    8、编写service/impl/CityServiceImpl.java

    1. package com.service.impl;
    2.  
    3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    4. import com.dao.CityDao;
    5. import com.entity.CityEntity;
    6. import com.service.CityService;
    7. import org.springframework.stereotype.Service;
    8.  
    9. @Service("CityService")
    10. public class CityServiceImpl extends ServiceImpl implements CityService {
    11. }

    9、启动App类

    结果：

    访问端口

    http://localhost:9090/city/list

    得到数据

    三、可视化

    1、选择Echarts中地图示例

            选择Echarts中地图示例，我选择的是这个

    2、创建html文件

            在resources/templates创建html文件

    在html文件中引用 js 文件

    通过jQuery获取接口数据，完整代码如下：

    1. <div id="main" style="width:1620px; height:750px;">div>
    2. <script type="text/javascript">
    3.     window.onload = function citys() {
    4.         // 基于准备好的dom，初始化echarts实例
    5.         var myChart = echarts.init(document.getElementById('main'));
    6.         myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    7.         //声明一个对象
    8.         var citylist = [];
    9.         var nus = [];
    10.         $.ajax({
    11.             async: true,            //异步请求
    12.             data: {},
    13.             //请求方式get
    14.             type: "GET",
    15.             //请求地址
    16.             url: "/city/list",
    17.             //数据，json字符串
    18.             dataType: "json",
    19.             //请求成功
    20.             success: function (result) {
    21.                 console.log(result);
    22.                 //进行数据的遍历
    23.                 $.each(result, function (index, item) {
    24.                     citylist.push(item.city);
    25.                     // 格式化对象
    26.                     nus.push({
    27.                         name: item.city,
    28.                         value: item.count
    29.                     });
    30.                 });
    31.                 console.log(citylist);
    32.                 console.log(nus);
    33.                 myChart.hideLoading();    //隐藏加载动画
    34.                 var data = nus;  // 城市的数据
    35.                 // 地理坐标
    36.                 var geoCoordMap = {
    37.                     海门: [121.15, 31.89],
    38.                     鄂尔多斯: [109.781327, 39.608266],
    39.                     招远: [120.38, 37.35],
    40.                     舟山: [122.207216, 29.985295],
    41.                     齐齐哈尔: [123.97, 47.33],
    42.                     盐城: [120.13, 33.38],
    43.                     赤峰: [118.87, 42.28],
    44.                     青岛: [120.33, 36.07],
    45.                     乳山: [121.52, 36.89],
    46.                     金昌: [102.188043, 38.520089],
    47.                     泉州: [118.58, 24.93],
    48.                     莱西: [120.53, 36.86],
    49.                     日照: [119.46, 35.42],
    50.                     胶南: [119.97, 35.88],
    51.                     南通: [121.05, 32.08],
    52.                     拉萨: [91.11, 29.97],
    53.                     云浮: [112.02, 22.93],
    54.                     梅州: [116.1, 24.55],
    55.                     文登: [122.05, 37.2],
    56.                     上海: [121.48, 31.22],
    57.                     攀枝花: [101.718637, 26.582347],
    58.                     威海: [122.1, 37.5],
    59.                     承德: [117.93, 40.97],
    60.                     厦门: [118.1, 24.46],
    61.                     汕尾: [115.375279, 22.786211],
    62.                     潮州: [116.63, 23.68],
    63.                     丹东: [124.37, 40.13],
    64.                     太仓: [121.1, 31.45],
    65.                     曲靖: [103.79, 25.51],
    66.                     烟台: [121.39, 37.52],
    67.                     福州: [119.3, 26.08],
    68.                     瓦房店: [121.979603, 39.627114],
    69.                     即墨: [120.45, 36.38],
    70.                     抚顺: [123.97, 41.97],
    71.                     玉溪: [102.52, 24.35],
    72.                     张家口: [114.87, 40.82],
    73.                     阳泉: [113.57, 37.85],
    74.                     莱州: [119.942327, 37.177017],
    75.                     湖州: [120.1, 30.86],
    76.                     汕头: [116.69, 23.39],
    77.                     昆山: [120.95, 31.39],
    78.                     宁波: [121.56, 29.86],
    79.                     湛江: [110.359377, 21.270708],
    80.                     揭阳: [116.35, 23.55],
    81.                     荣成: [122.41, 37.16],
    82.                     连云港: [119.16, 34.59],
    83.                     葫芦岛: [120.836932, 40.711052],
    84.                     常熟: [120.74, 31.64],
    85.                     东莞: [113.75, 23.04],
    86.                     河源: [114.68, 23.73],
    87.                     淮安: [119.15, 33.5],
    88.                     泰州: [119.9, 32.49],
    89.                     南宁: [108.33, 22.84],
    90.                     营口: [122.18, 40.65],
    91.                     惠州: [114.4, 23.09],
    92.                     江阴: [120.26, 31.91],
    93.                     蓬莱: [120.75, 37.8],
    94.                     韶关: [113.62, 24.84],
    95.                     嘉峪关: [98.289152, 39.77313],
    96.                     广州: [113.23, 23.16],
    97.                     延安: [109.47, 36.6],
    98.                     太原: [112.53, 37.87],
    99.                     清远: [113.01, 23.7],
    100.                     中山: [113.38, 22.52],
    101.                     昆明: [102.73, 25.04],
    102.                     寿光: [118.73, 36.86],
    103.                     盘锦: [122.070714, 41.119997],
    104.                     长治: [113.08, 36.18],
    105.                     深圳: [114.07, 22.62],
    106.                     珠海: [113.52, 22.3],
    107.                     宿迁: [118.3, 33.96],
    108.                     咸阳: [108.72, 34.36],
    109.                     铜川: [109.11, 35.09],
    110.                     平度: [119.97, 36.77],
    111.                     佛山: [113.11, 23.05],
    112.                     海口: [110.35, 20.02],
    113.                     江门: [113.06, 22.61],
    114.                     章丘: [117.53, 36.72],
    115.                     肇庆: [112.44, 23.05],
    116.                     大连: [121.62, 38.92],
    117.                     临汾: [111.5, 36.08],
    118.                     吴江: [120.63, 31.16],
    119.                     石嘴山: [106.39, 39.04],
    120.                     沈阳: [123.38, 41.8],
    121.                     苏州: [120.62, 31.32],
    122.                     茂名: [110.88, 21.68],
    123.                     嘉兴: [120.76, 30.77],
    124.                     长春: [125.35, 43.88],
    125.                     胶州: [120.03336, 36.264622],
    126.                     银川: [106.27, 38.47],
    127.                     张家港: [120.555821, 31.875428],
    128.                     三门峡: [111.19, 34.76],
    129.                     锦州: [121.15, 41.13],
    130.                     南昌: [115.89, 28.68],
    131.                     柳州: [109.4, 24.33],
    132.                     三亚: [109.511909, 18.252847],
    133.                     自贡: [104.778442, 29.33903],
    134.                     吉林: [126.57, 43.87],
    135.                     阳江: [111.95, 21.85],
    136.                     泸州: [105.39, 28.91],
    137.                     西宁: [101.74, 36.56],
    138.                     宜宾: [104.56, 29.77],
    139.                     呼和浩特: [111.65, 40.82],
    140.                     成都: [104.06, 30.67],
    141.                     大同: [113.3, 40.12],
    142.                     镇江: [119.44, 32.2],
    143.                     桂林: [110.28, 25.29],
    144.                     张家界: [110.479191, 29.117096],
    145.                     宜兴: [119.82, 31.36],
    146.                     北海: [109.12, 21.49],
    147.                     西安: [108.95, 34.27],
    148.                     金坛: [119.56, 31.74],
    149.                     东营: [118.49, 37.46],
    150.                     牡丹江: [129.58, 44.6],
    151.                     遵义: [106.9, 27.7],
    152.                     绍兴: [120.58, 30.01],
    153.                     扬州: [119.42, 32.39],
    154.                     常州: [119.95, 31.79],
    155.                     潍坊: [119.1, 36.62],
    156.                     重庆: [106.54, 29.59],
    157.                     台州: [121.420757, 28.656386],
    158.                     南京: [118.78, 32.04],
    159.                     滨州: [118.03, 37.36],
    160.                     贵阳: [106.71, 26.57],
    161.                     无锡: [120.29, 31.59],
    162.                     本溪: [123.73, 41.3],
    163.                     克拉玛依: [84.77, 45.59],
    164.                     渭南: [109.5, 34.52],
    165.                     马鞍山: [118.48, 31.56],
    166.                     宝鸡: [107.15, 34.38],
    167.                     焦作: [113.21, 35.24],
    168.                     句容: [119.16, 31.95],
    169.                     北京: [116.46, 39.92],
    170.                     徐州: [117.2, 34.26],
    171.                     衡水: [115.72, 37.72],
    172.                     包头: [110, 40.58],
    173.                     绵阳: [104.73, 31.48],
    174.                     乌鲁木齐: [87.68, 43.77],
    175.                     枣庄: [117.57, 34.86],
    176.                     杭州: [120.19, 30.26],
    177.                     淄博: [118.05, 36.78],
    178.                     鞍山: [122.85, 41.12],
    179.                     溧阳: [119.48, 31.43],
    180.                     库尔勒: [86.06, 41.68],
    181.                     安阳: [114.35, 36.1],
    182.                     开封: [114.35, 34.79],
    183.                     济南: [117, 36.65],
    184.                     德阳: [104.37, 31.13],
    185.                     温州: [120.65, 28.01],
    186.                     九江: [115.97, 29.71],
    187.                     邯郸: [114.47, 36.6],
    188.                     临安: [119.72, 30.23],
    189.                     兰州: [103.73, 36.03],
    190.                     沧州: [116.83, 38.33],
    191.                     临沂: [118.35, 35.05],
    192.                     南充: [106.110698, 30.837793],
    193.                     天津: [117.2, 39.13],
    194.                     富阳: [119.95, 30.07],
    195.                     泰安: [117.13, 36.18],
    196.                     诸暨: [120.23, 29.71],
    197.                     郑州: [113.65, 34.76],
    198.                     哈尔滨: [126.63, 45.75],
    199.                     聊城: [115.97, 36.45],
    200.                     芜湖: [118.38, 31.33],
    201.                     唐山: [118.02, 39.63],
    202.                     平顶山: [113.29, 33.75],
    203.                     邢台: [114.48, 37.05],
    204.                     德州: [116.29, 37.45],
    205.                     济宁: [116.59, 35.38],
    206.                     荆州: [112.239741, 30.335165],
    207.                     宜昌: [111.3, 30.7],
    208.                     义乌: [120.06, 29.32],
    209.                     丽水: [119.92, 28.45],
    210.                     洛阳: [112.44, 34.7],
    211.                     秦皇岛: [119.57, 39.95],
    212.                     株洲: [113.16, 27.83],
    213.                     石家庄: [114.48, 38.03],
    214.                     莱芜: [117.67, 36.19],
    215.                     常德: [111.69, 29.05],
    216.                     保定: [115.48, 38.85],
    217.                     湘潭: [112.91, 27.87],
    218.                     金华: [119.64, 29.12],
    219.                     岳阳: [113.09, 29.37],
    220.                     长沙: [113, 28.21],
    221.                     衢州: [118.88, 28.97],
    222.                     廊坊: [116.7, 39.53],
    223.                     菏泽: [115.480656, 35.23375],
    224.                     合肥: [117.27, 31.86],
    225.                     武汉: [114.31, 30.52],
    226.                     大庆: [125.03, 46.58]
    227.                 };
    228.                 var convertData = function (data) {  // 遍历传入的data数组。
    229.                     var res = [];
    230.                     for (var i = 0; i < data.length; i++) {
    231.                         var geoCoord = geoCoordMap[data[i].name];  // 城市的名称
    232.                         if (geoCoord) {  // 检查geoCoordMap中是否存在当前城市的数据。
    233.                             res.push({  // 格式化数据
    234.                                 name: data[i].name,
    235.                                 value: geoCoord.concat(data[i].value)
    236.                             });
    237.                         }
    238.                     }
    239.                     return res;
    240.                 };
    241.                 function renderItem(params, api) {  // 渲染坐标信息元素
    242.                     var coords = [  // 定义一个包含经纬度坐标的数组。
    243.                         [116.7, 39.53],
    244.                         [103.73, 36.03],
    245.                         [112.91, 27.87],
    246.                         [120.65, 28.01],
    247.                         [119.57, 39.95]
    248.                     ];
    249.                     var points = [];  // 存储转换后的坐标点
    250.                     // 将经纬度坐标转换为图表坐标系中的点。
    251.                     for (var i = 0; i < coords.length; i++) {
    252.                         points.push(api.coord(coords[i]));
    253.                     }
    254.                     var color = api.visual('color');  // 填充颜色
    255.                     return {
    256.                         type: 'polygon',  // 指定图形类型为 'polygon'（多边形）。
    257.                         // 定义多边形的形状，即使用前面计算出的 points 数组。
    258.                         shape: {
    259.                             points: echarts.graphic.clipPointsByRect(points, {
    260.                                 x: params.coordSys.x,
    261.                                 y: params.coordSys.y,
    262.                                 width: params.coordSys.width,
    263.                                 height: params.coordSys.height
    264.                             })
    265.                         },
    266.                         // 定义多边形的样式，包括填充颜色和描边颜色。
    267.                         style: api.style({
    268.                             fill: color,
    269.                             stroke: echarts.color.lift(color)
    270.                         })
    271.                     };
    272.                 }
    273.                 var option = {
    274.                     // 设置整个图表的背景颜色为透明
    275.                     backgroundColor: 'transparent',
    276.                     // 配置标题，包括主标题文本、位置和样式
    277.                     title: {
    278.                         text: '职位城市分布', // 主标题文本
    279.                         left: 'center', // 主标题位置设置为居中
    280.                         textStyle: {
    281.                             color: '#fff' // 主标题文字颜色设置为白色
    282.                         }
    283.                     },
    284.                     // 配置提示框组件，当鼠标悬停在图表项时显示的提示信息
    285.                     tooltip: {
    286.                         trigger: 'item' // 提示框触发方式设置为数据项
    287.                     },
    288.                     bmap: {
    289.                         center: [104.114129, 37.550339], // 地图中心点坐标
    290.                         zoom: 5, // 地图缩放级别
    291.                         roam: true, // 是否允许缩放和平移
    292.                         mapStyle: { // 自定义地图样式
    293.                             styleJson: [
    294.                                 {
    295.                                     featureType: 'water',
    296.                                     elementType: 'all',
    297.                                     stylers: {
    298.                                         color: '#044161'
    299.                                     }
    300.                                 },
    301.                                 {
    302.                                     featureType: 'land',
    303.                                     elementType: 'all',
    304.                                     stylers: {
    305.                                         color: '#004981'
    306.                                     }
    307.                                 },
    308.                                 {
    309.                                     featureType: 'boundary',
    310.                                     elementType: 'geometry',
    311.                                     stylers: {
    312.                                         color: '#064f85'
    313.                                     }
    314.                                 },
    315.                                 {
    316.                                     featureType: 'railway',
    317.                                     elementType: 'all',
    318.                                     stylers: {
    319.                                         visibility: 'off'
    320.                                     }
    321.                                 },
    322.                                 {
    323.                                     featureType: 'highway',
    324.                                     elementType: 'geometry',
    325.                                     stylers: {
    326.                                         color: '#004981'
    327.                                     }
    328.                                 },
    329.                                 {
    330.                                     featureType: 'highway',
    331.                                     elementType: 'geometry.fill',
    332.                                     stylers: {
    333.                                         color: '#005b96',
    334.                                         lightness: 1
    335.                                     }
    336.                                 },
    337.                                 {
    338.                                     featureType: 'highway',
    339.                                     elementType: 'labels',
    340.                                     stylers: {
    341.                                         visibility: 'off'
    342.                                     }
    343.                                 },
    344.                                 {
    345.                                     featureType: 'arterial',
    346.                                     elementType: 'geometry',
    347.                                     stylers: {
    348.                                         color: '#004981'
    349.                                     }
    350.                                 },
    351.                                 {
    352.                                     featureType: 'arterial',
    353.                                     elementType: 'geometry.fill',
    354.                                     stylers: {
    355.                                         color: '#00508b'
    356.                                     }
    357.                                 },
    358.                                 {
    359.                                     featureType: 'poi',
    360.                                     elementType: 'all',
    361.                                     stylers: {
    362.                                         visibility: 'off'
    363.                                     }
    364.                                 },
    365.                                 {
    366.                                     featureType: 'green',
    367.                                     elementType: 'all',
    368.                                     stylers: {
    369.                                         color: '#056197',
    370.                                         visibility: 'off'
    371.                                     }
    372.                                 },
    373.                                 {
    374.                                     featureType: 'subway',
    375.                                     elementType: 'all',
    376.                                     stylers: {
    377.                                         visibility: 'off'
    378.                                     }
    379.                                 },
    380.                                 {
    381.                                     featureType: 'manmade',
    382.                                     elementType: 'all',
    383.                                     stylers: {
    384.                                         visibility: 'off'
    385.                                     }
    386.                                 },
    387.                                 {
    388.                                     featureType: 'local',
    389.                                     elementType: 'all',
    390.                                     stylers: {
    391.                                         visibility: 'off'
    392.                                     }
    393.                                 },
    394.                                 {
    395.                                     featureType: 'arterial',
    396.                                     elementType: 'labels',
    397.                                     stylers: {
    398.                                         visibility: 'off'
    399.                                     }
    400.                                 },
    401.                                 {
    402.                                     featureType: 'boundary',
    403.                                     elementType: 'geometry.fill',
    404.                                     stylers: {
    405.                                         color: '#029fd4'
    406.                                     }
    407.                                 },
    408.                                 {
    409.                                     featureType: 'building',
    410.                                     elementType: 'all',
    411.                                     stylers: {
    412.                                         color: '#1a5787'
    413.                                     }
    414.                                 },
    415.                                 {
    416.                                     featureType: 'label',
    417.                                     elementType: 'all',
    418.                                     stylers: {
    419.                                         visibility: 'off'
    420.                                     }
    421.                                 }
    422.                             ]
    423.                         }
    424.                     },
    425.                     series: [
    426.                         {
    427.                             // 定义一个散点图系列
    428.                             name: 'pm2.5', // 系列名称
    429.                             type: 'scatter', // 图表类型为散点图
    430.                             coordinateSystem: 'bmap', // 指定使用的坐标系为百度地图
    431.                             data: convertData(data), // 使用转换后的数据
    432.                             encode: { // 定义数据编码，value: 2 表示数据值作为散点图的 z 轴值
    433.                                 value: 2
    434.                             },
    435.                             symbolSize: function (val) { // 定义散点大小的回调函数
    436.                                 return val[2] / 10;
    437.                             },
    438.                             label: {
    439.                                 formatter: '{b}', // 标签格式化器，显示数据名称
    440.                                 position: 'right', // 标签位置为右侧
    441.                             },
    442.                             itemStyle: {
    443.                                 color: '#ddb926' // 数据项样式的颜色
    444.                             },
    445.                             emphasis: {
    446.                                 label: {
    447.                                     show: true, // 高亮状态下标签是否显示
    448.                                 }
    449.                             }
    450.                         },
    451.                         {
    452.                             // 图表类型，这里是 effectScatter，表示带有特效的散点图
    453.                             type: 'effectScatter',
    454.                             // 指定坐标系类型，这里是 'bmap'，表示使用百度地图作为坐标系
    455.                             coordinateSystem: 'bmap',
    456.                             data: convertData(data),
    457.                             // 编码，定义如何将数据字段映射到图形的属性上
    458.                             encode: {
    459.                                 value: 2 // 表示将数据项的 value 属性映射到散点图的 z 轴上
    460.                             },
    461.                             // 自定义数据点的大小
    462.                             symbolSize: function (val) {
    463.                                 return val[2] / 10; // 根据数据值的大小调整散点的大小
    464.                             },
    465.                             // 设置波动效果一直显示
    466.                             showEffectOn: 'render',
    467.                             rippleEffect: {
    468.                                 brushType: 'stroke',
    469.                                 scale: 6, // 控制波动的缩放比例
    470.                                 period: 5  // 控制波动周期，值越大，波动越慢
    471.                             },
    472.                             // 是否启用鼠标悬停动画
    473.                             hoverAnimation: true,
    474.                             // 标签的配置
    475.                             label: {
    476.                                 formatter: '{b}', // 标签内容的格式化器，'{b}' 表示显示数据项的名称
    477.                                 position: 'right', // 标签的位置在数据点的右侧
    478.                                 show: true, // 是否显示标签
    479.                                 textStyle: {
    480.                                     // 修改标签文本颜色为红色，您可以根据需要选择颜色
    481.                                     color: '#F7F7F7',
    482.                                     // 如果需要，您可以保留字体大小和加粗样式，或者添加其他样式
    483.                                     fontSize: 12,
    484.                                     fontWeight: 'bold',
    485.                                     fontFamily: 'Arial, sans-serif'
    486.                                 }
    487.                             },
    488.                             // 数据项样式的配置
    489.                             itemStyle: {
    490.                                 color: '#f4e925', // 数据点的颜色
    491.                                 shadowBlur: 10, // 阴影的模糊度
    492.                                 shadowColor: '#333' // 阴影的颜色
    493.                             },
    494.                             // z 层级，用于控制图形的堆叠顺序
    495.                             zlevel: 1
    496.                         },
    497.                     ]
    498.                 };
    499.                 // 使用 setOption 方法加载数据和配置项
    500.                 myChart.setOption(option);
    501.  
    502.             },
    503.             error: function (errorMsg) {
    504.                 //请求失败时执行该函数
    505.                 alert("图表请求数据失败!");
    506.                 myChart.hideLoading();
    507.             }
    508.         });
    509.     };
    510. script>

    3、结果

    访问端口

    http://localhost:9090/

  • 相关阅读:
    第二十四节 SpringBoot使用spring.factories
    C++ map和set
    Pandas处理异常值的两种方法
    数据结构-链表的简单操作实现
    Ubuntu下使用ffmpeg分割和合并视频文件
    每天一个注解之 @WebMethod
    计算机图形学 实验三:二维图形变换
    STM32G030F6 (SOP-20)Cortex ® -M0+, 32KB Flash, 8KB RAM, 17 GPIOs
    Go 1.22 将修复 for 循环变量错误
    [代码随想录]二叉树篇
  • 原文地址：https://blog.csdn.net/2202_75688394/article/details/139391384