动态统计图，即FC统计图。
    只听名字，感觉有些陌生，有些不熟悉，其实相对动态统计图而言，还有静态统计图；前面博客所写的如何制作统计图，也就是指的静态统计图。相对静态统计图而言，动态统计图，是有动画效果的，给人的直观效果也比较容易接受。
   FC动态统计图模板的制作，是可以参考统计图的制作的，方法同它一样，在这里就不细说了，只说下需要注意的地方及细节吧。
   1、选取数据
      制作FC统计图，数据的选取，是很重要的；做不同的模板，需要的数据不同，有些是需要带有小数的数据，有些是整数，又有些是百分数。我们需要根据不同的情况来选取数据集或者自己内建数据集。
  2、制作模板
    模板的制作，具体方法参考前面统计图制作的那篇博客。模板一般是做4个图或者6个图，前者比较多。
   3、属性设置
  同选取数据同样重要的是 属性的选择，不同的属性，做出来的效果稍有差距，这个 需要根据具体情况来选择了，这里也不好多讲。
   4、预览效果
   预览效果，即自己所做模板的情况。有时候预览效果，会状况百出，可是是属性的设置问题，也可能是数据选取的问题，这种情况也需要根据具体情况来具体说明。


   

什么是数据图？数据映射是一种图形数据资产管理工具。它提供了多层次的图形显示，并具有各种控制功能，可以满足图形查询以及在业务应用，数据管理，开发，运营和维护方面的不同应用场景的需求和辅助分析需求。例如，像今年的疫情暴发一样，许多平台都启动了与疫情地图有关的实时页面，以方便公众及时了解最新动态。这些地图可以直观，清晰地反映当前的地区流行情况，是一个典型的数据地图的应用。那么我们如何制作数据图呢？

一、在excel里制作（绘制地图图形 + VBA宏语言）

思路：使用插入的图形“任意多边形”绘制地图；为每个“任意多边形”分配正确的名称；给“任意多边形”赋值；使用VBA来操纵“任意多边形”的值，例如着色。

1、先准备一张所需要的地图图片，这个地图图片我们可以上网搜索下载，然后利用插入绘制多边形图片将地图中的区域描边



2、在左上角修改所选区域



要将数据表中的数据与地图中的区域相关联，此处将使用VBA，代码为：



这段代码是修改地图所选区域的颜色的，懂VBA的会觉得简单，不懂VBA宏语言的可以百度。

该代码用于修改地图所选区域的颜色。了解VBA的人会觉得很简单，如果你不了解VBA宏语言，可以使用百度。

二、可视化软件做数据地图

除了Excel之外，还有更快的数据地图制作方法，那就是利用一些可视化地图制作软件，比如一些gis地图工具、BI工具FineBI、tableau等，因为大部分的gis地图工具都要收费，这里小编我就用几个步骤教给大家用FineBI来制作数据地图。

1.读取数据：导入Excel或连接数据库；

2.处理数据：识别和转换省市信息数据，或匹配经纬度数据；

3.绘制图表：拖放数据字段，系统将自动确认经纬度或行政区名称的匹配，并一键生成地图；

4.美化：根据您自己的小趣味或分析目标，添加数据警告，点线面的颜色和大小处理或酷炫的动态效果。



除了上述方法以外，我们还可以用python和echarts完成数据地图的制作，但是需要有一定的代码基础，关于数据地图的制作，想学的朋友们有空可以自己动手练习！

后期上传demo
先看gif：


步入正题了，如何做一款实时更新的天气预报software？

1.确定需要的数据，天气状况、最高/最低气温、当前气温、大气压、湿度、降水量、能见度、当前风向风速、PM2.5、卫星云图、雷达回波。

2.前面的我觉得只要能打开浏览器都能搞定，找相关的数据接口，api。网上有很多，收费，不收费，限量收费。各种各样的很多，大多数返回数据是json类型，就不多做累述了。自行查找。

3.最后两个卫星云图、雷达回波，没有对应的api接口，于是另寻出路。

4.中国气象台网站，第一次进来的时候我也是蒙圈的，html网页数据怎么获取，又没有指定接口，而且也不知道规律。很难搞。

5.对比数据，挨个下载图片进行循环播放，达到动态雷达图的效果。



通过上图不难看出，数据来源是按照分钟级别来刷新的。而且最近的一张图大约是当前时间往前推20分钟。最后一张图是当前时间往前推2小时20分钟。毕竟卫星传回地球，然后再解析上传，是需要时间的。所以能理解。但是这样不规律的数据是很头疼的。

只能通过一分一分的往前推，判断该时间是否有雷达图数据，有的话就下载（UnityWebRequestTexture）存储然后继续上一分钟判断，没有的话就继续上一分钟判断。从而达到获取2小时20分钟之内的所有雷达图数据。再进行循环播放，达到动态雷达图的效果。

每个周期有15张左右图片。

分析图片网址规律：

右键点击图片，新标签打开图片。



上图可以看出，有两个时间戳，第一个时间戳是UTC时间（国际时间）的 “年/月/日”，第二个时间戳是UTC时间（国际时间）的   “年月日时分00000”。.JPG之后的数据经过测试，属于无用数据，可以直接忽略。

注：把图片下载下来，注意图片的尺寸，ui尺寸对应上。

规律找到，通过计算、改变时间戳拼接成网址，就能挨个下载当前网站所有的雷达图数据了。
不说了，上实现代码：
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

public class DownloadNephogram : MonoBehaviour
{
    public RawImage rawImg;//显示图片的ui
    public Dictionary<long, Texture2D> Texture2DsDic = new Dictionary<long, Texture2D>();//按照时间戳存储下载的图片
    public List<long> Texture2DsNum;//记录时间戳列表  后续排序使用
    private int Year;
    private int Month;
    private int Day;
    private int Hour;
    private int Minute;

    private int BeforeHour;
    private int BackMinute;//回退时间，20分钟前有图像数据
    public int TargetHour;//目标小时，回退2小时
    public int CurrentHour;//当前小时
    public int TargetMinute;//目标分钟，回退2小时
    public int CurrentMinute;//当前分钟
    public string UrlDateTime;//日期数据  第一个时间戳
    public string UrlImageName;//图片名称数据  第二个时间戳
    public bool IsLoaded;//已经下载完成

    public float CurrentLoadNum;//当前加载的图片序列
    
    Texture2D tex2d;

    void Update()
    {
        TimeCalculate();
        UpdateRawImg();
    }
    /// <summary>
    /// 时间戳计算、回退目标时间计算、刷新周期设置
    /// </summary>
    void TimeCalculate()
    {
        Hour = DateTime.UtcNow.Hour;
        if (BeforeHour != Hour)//达到每小时整点更新一次
        {
            StopCoroutine("DownLoadImage");
            //Texture2Ds.Clear();
            Texture2DsDic.Clear();
            Texture2DsNum.Clear();

            IsLoaded = false;
            CurrentLoadNum = 0;

            Year = DateTime.UtcNow.Year;
            Month = DateTime.UtcNow.Month;
            Day = DateTime.UtcNow.Day;
            Hour = DateTime.UtcNow.Hour;
            Minute = DateTime.UtcNow.Minute;
            if (Minute < BackMinute)//时间回退判断
            {
                if (Hour == 0)//小时判断  如果是0点，回退就是23点
                {
                    Hour = 23;
                    Minute = 60 - Minute + BackMinute;
                    DayJudge();
                }
                else
                {
                    Hour--;
                    Minute = 60 - Minute + BackMinute;
                }
            }
            FormatTime(Year, Month, Day, Hour, Minute);
            if (Hour == 1)
                TargetHour = 23;
            else if (Hour == 0)
                TargetHour = 22;
            else
                TargetHour = Hour - 2;
            CurrentHour = Hour;
            CurrentMinute = TargetMinute = Minute;
            BeforeHour = Hour;


            ForLoopDownLoad();//
        }
    }
    /// <summary>
    /// 天数判断
    /// </summary>
    void DayJudge()
    {
        if (Day == 1)//月份天数判断
        {
            if (Month == 1 || Month == 3 || Month == 5 || Month == 7 || Month == 8 || Month == 10 || Month == 12)//31天
            {
                if (Month == 1)//年份判断
                    Year--;
                Day = 31;
            }
            else if (Month == 2)
            {
                if (Year % 4 == 0)//28天
                    Day = 28;
                else//27天
                    Day = 27;
            }
            else//30天的月份
                Day = 30;
        }
    }

    /// <summary>
    /// 更新循环显示图片
    /// </summary>
    void UpdateRawImg()
    {
        if (IsLoaded)
        {
            if (CurrentLoadNum > Texture2DsNum.Count-1)
                CurrentLoadNum = 0;

            if (Texture2DsDic.ContainsKey(Texture2DsNum[(int)CurrentLoadNum]))//判断该时间戳是否有图片，有就更新
            {
                rawImg.texture = Texture2DsDic[Texture2DsNum[(int)CurrentLoadNum]];
            }

            if (CurrentLoadNum >= 0)
            {
                CurrentLoadNum += 0.03f;
            }
        }
        else
        {
            if (Texture2DsDic.Count>0)
            {
                Texture2DsNum.Sort();
                /*因for循环下载，网速等原因使得字典存储无序；
                 所以用列表进行一次列表内的时间戳排序。
                 再用字典按序查找列表内的long类型时间戳。
                 达到顺序播放*/
                IsLoaded = true;
            }
        }
    }
    /// <summary>
    /// 格式化时间戳
    /// </summary>
    /// <param name="year">年</param>
    /// <param name="month">月</param>
    /// <param name="day">日</param>
    /// <param name="hour">小时</param>
    /// <param name="minute">分钟</param>
    void FormatTime(int year, int month, int day, int hour, int minute)
    {
        UrlDateTime = $"{year:D4}/{month:D2}/{day:D2}";
        UrlImageName = $"{year:D4}{month:D2}{day:D2}{hour:D2}{minute:D2}{"00000"}";
    }

    /// <summary>
    /// 利用for循环开启每一分钟的下载协程，同时下载这段时间内的所有图片。达到最快的下载速度。
    /// 优点：下载速度快
    /// 缺点：下载时无序，循环播放时需要考虑排序问题；性能消耗大，因暂时没想好怎么用线程开启网络下载，目前用的笨方法，希望大神指点。
    /// 需要考虑临界时间的for循环判断，比如0点前2小时是23、22点。1点前2小时是0、23点。
    /// </summary>
    void ForLoopDownLoad()
    {
        if (CurrentHour == 1)
        {
            for (int i = CurrentHour; i >= -1 && i <= 1; i--)
            {
                CurrentHour = i;
                if (CurrentHour == -1)
                {
                    CurrentHour = 23;
                    DayJudge();
                }

                //Debug.LogWarning(CurrentHour);
                if (1 == CurrentHour)
                {
                    if (CurrentMinute != 0)
                    {
                        for (int j = CurrentMinute; j > -1; j--)
                        {
                            CurrentMinute = j;
                            //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                    }
                    else
                    {
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");
                    }
                }
                else if (0 == CurrentHour)
                {
                    for (int j = 59; j > -1; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");
                    }
                }
                else if (23 == CurrentHour)
                {
                    for (int j = 59; j >= TargetMinute; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        if (CurrentMinute != TargetMinute)
                        {
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                        else
                        {
                            StopCoroutine("DownLoadImage");
                        }
                    }
                }
            }
        }
        else if (CurrentHour == 0)
        {
            for (int i = CurrentHour; i >= -2 && i <= 0; i--)
            {
                CurrentHour = i;
                if (CurrentHour == -1)
                {
                    CurrentHour = 23;
                    DayJudge();
                }

                if (CurrentHour == -2)
                    CurrentHour = 22;
                //Debug.LogWarning(CurrentHour);
                if (0 == CurrentHour)
                {
                    if (CurrentMinute != 0)
                    {
                        for (int j = CurrentMinute; j > -1; j--)
                        {
                            CurrentMinute = j;
                            //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                    }
                    else
                    {
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");
                    }
                }
                else if (23 == CurrentHour)
                {
                    for (int j = 59; j > -1; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");

                    }
                }
                else if (22 == CurrentHour)
                {
                    for (int j = 59; j >= TargetMinute; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        if (CurrentMinute != TargetMinute)
                        {
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                        else
                        {
                            StopCoroutine("DownLoadImage");
                        }
                    }
                }
            }
        }
        else
        {
            for (int i = CurrentHour; i >= TargetHour; i--)
            {
                CurrentHour = i;
                //Debug.LogWarning(CurrentHour);
                if (TargetHour + 2 == CurrentHour)
                {
                    if (CurrentMinute != 0)
                    {
                        for (int j = CurrentMinute; j > -1; j--)
                        {
                            CurrentMinute = j;
                            //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                    }
                    else
                    {
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");
                    }
                }
                else if (TargetHour + 1 == CurrentHour)
                {
                    for (int j = 59; j > -1; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");
                        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                        StartCoroutine("DownLoadImage");
                    }
                }
                else if (TargetHour == CurrentHour)
                {
                    for (int j = 59; j >= TargetMinute; j--)
                    {
                        CurrentMinute = j;
                        //Debug.Log("现在是" + CurrentHour + "点" + CurrentMinute + "分");

                        if (CurrentMinute!=TargetMinute)
                        {
                            FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
                            StartCoroutine("DownLoadImage");
                        }
                        else
                        {
                            StopCoroutine("DownLoadImage");
                        }
                    }
                }
            }
        }
    }

    void ContinueLoad()
    {
        if (CurrentMinute == 0)
        {
            CurrentMinute = 59;
            if (CurrentHour != 0)
                CurrentHour--;
            else
                CurrentHour = 23;
        }
        else
        {
            CurrentMinute--;
        }
        FormatTime(Year, Month, Day, CurrentHour, CurrentMinute);
        if (TargetHour != CurrentHour || TargetMinute != CurrentMinute)
            StartCoroutine("DownLoadImage");
        else
        {

            StopCoroutine("DownLoadImage");
            IsLoaded = true;
        }
    }

    /// <summary>
    /// 下载图片
    /// </summary>
    /// <returns></returns>
    IEnumerator DownLoadImage()
    {
        using (UnityWebRequest w = UnityWebRequestTexture.GetTexture("http://image.nmc.cn/product/" + UrlDateTime + Url + UrlImageName + ".JPG"))
        {
            long rec = long.Parse(UrlImageName);
            yield return w.SendWebRequest();
            if (w.isDone)
            {
                if (w.isNetworkError || w.isHttpError)
                {
                    Debug.Log(w.error);
                }
                else
                {
                    if (w.responseCode == 200)
                    {
                        tex2d = new Texture2D(width, height, TextureFormat.RGB24, false);
                        tex2d.LoadImage(w.downloadHandler.data);
                        if (Texture2DsDic.ContainsKey(rec))
                        {
                            Texture2DsDic[rec] = tex2d;
                        }
                        else
                        {
                            Texture2DsDic.Add(rec, tex2d);
                        }
                        Texture2DsNum.Add(rec);
                    }
                }
            }
        }
    }
}

好久没写博客了，最近碰到了如何运用echarts制作各种图表的问题，在几番百度之后，问题终于得到了解决，现在来和大家分享一下。

之前所做的是影城管理系统，需要统计各个类型影片的数量，要通过饼状图的方式来展示相应的数据，后端代码是用springboot写的，结合了mybatis,接下来我只展示主要的代码。

首先FilmMapper接口中定义的方法如下：

    /**
     * 按照类别统计数量并记录类别名称
     */
    List<Map<Object,Object>> countFilm2();

我这边返回值是List类型，参数为Map类型，配置文件FilmMapper.xml中，具体的sql代码如下：

<!-- 查询电影类别数量及对应的类别名称 -->
    <select id="countFilm2" resultType="java.util.Map">
        select count(*) as num,t.type_name as typeName from film f,type t where f.type_id=t.type_id group by f.type_id
    </select>

我这边写了一个连接求和查询语句，返回值类型为Map类型，接下来常规写FilmService和FilmServiceImpl,这里没什么好说的，跟FilmMapper基本一样哈，接下来写控制类FilmController，简要代码如下：

@Slf4j
@RestController
@RequestMapping("/film")
public class FilmController {
    @Autowired
    FilmService filmService;
    
    @RequestMapping("/countFilm2")
    public List<Map<Object,Object>> countFilm2(){
        return filmService.countFilm2();
    }
}

这里我通过跨域获取数据，前端通过vue书写，组件定义为FilmChart2，先在index.js中配置好路由，代码如下：

<template>
    <div class="chart-container">
		<div id="chartPie" style="width:100%; height:550px;"></div>
	</div>
</template>

<script>
    export default {
        name: "FilmChart2",
		data() {
        	return {
        		chartPie: '',
				typeName: [],//影片类型名称
				typeNum: [] //影片类型数量
			}
		},
		methods: {
        	drawPieChart() {
				this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
				this.chartPie.setOption({
					//设置标题,副标题,以及标题位置居中
					title: {
						text: '影片统计(饼状图)',
						//subtext: '纯属虚构',
						x: 'center'
					},
					//具体点击某一项触发的样式内容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					//左上侧分类条形符
					legend: {
						orient: 'vertical',
						left: 'left',
						data: []
					},
					//饼状图类型以及数据源
					series: [
						{
							name: '统计数量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							data: [],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				});
			},
			//动态获取饼状图的数据
			async initData() {
        		var res = await this.axios.get("film/countFilm2");
				console.log(res.data);
				var getData = [];
				//先进行赋值
				for(let i=0; i<res.data.length; i++) {
					var obj = new Object();
					obj.name = res.data[i].typeName;
					obj.value = res.data[i].num;
					getData[i] = obj;
				}
				this.chartPie.setOption({
					legend: {
						data: res.data.typeName,
					},
					series:[{
							data: getData,
						}]
				});
			},
			drawCharts() {
				this.drawPieChart();
			},
		},
		mounted () {
        	this.initData();
			this.drawCharts();
		}

    }

</script>

<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}
</style>

上述代码中，我写了一些注释，大家不清楚的地方可以自己查看哈。我一开始没做出来的关键部分是如何获取map类型的数据，我一开始是放在了drawPieChart方法里面写，直接通过data传输，发现始终行不通；后来转换了思路，我放在数据初始化的方法initData中写，这样通过response中得到的数据就直接传给chartPie变量即可，具体效果图如下：



好了，本期博客就到这里了，下期希望给大家分享更加精彩的内容！