ECharts实现中国实时疫情数据查询（圆环图）展示（累计确诊，现存确诊，疑似、治愈、死亡）

毕设中有个功能涉及到了使用ECharts来实现一个小型的，精致的中国疫情展示，包括查询对应省市地区后的数据更新展示。
项目基于SpringBoot、MyBatis等技术。以下是这个小需求的部分实现过程。

1 默认加载下的ECharts中国疫情详情

用户在第一次打开页面的时候时是没有查询的，所以默认的图表需要设计，经过研究后，采用了展现全国疫情数据的图表作为默认展示。（不点击查询按钮，每次刷新后都会显示这个）
效果图如下（可以交互）：

实现
html代码：

<div style="width: 340px;height: 400px;float: left" id="areaDetail"></div>
          <script type="text/javascript">

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

            option = {
              title:{
                text:'中国地区详情\n',
                left:'center',
                textStyle:{
                }
              },
              color:['#AE212C','#EE6666','#FAC858','#91CC75',,'#5D7092'],
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '10%',
                data: ['累计确诊','现存确诊','疑似确诊','治愈','死亡'],
                left: 'center'
              },
              series: [
                {
                  name: '中国',
                  type: 'pie',
                  radius: ['47%', '70%'],
                  top:'10%',
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    normal: {
                      show: false,
                      position: 'center',
                      formatter:'{b}\n{c}人',
                      textStyle:{
                        fontSize:30,
                        fontweight:'bold',
                      }
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value:98,name:'累计确诊'},
                    {value: 7, name: '现存确诊'},
                    {value: 0, name: '疑似确诊'},
                    {value:91, name: '治愈'},
                    {value: 0, name: '死亡'}
                  ]
                }
              ]
            }
            myChart.setOption(option);
            $.getJSON('http://localhost:8080/covid/getChinaData', function (data) {
              console.log(data.confirm);
              console.log(data.nowConfirm);
              console.log(data.suspect);
              option.series[0].data[0].value=data.confirm;
              option.series[0].data[1].value=data.nowConfirm;
              option.series[0].data[2].value=data.suspect;
              option.series[0].data[3].value=data.heal;
              option.series[0].data[4].value=data.dead;
              myChart.setOption(option);
            })


          </script>

后端Controller层：

/**
    * 查询这一天的中国疫情数据 作为饼图
     * **/
    @ResponseBody
    @RequestMapping("getChinaData")
    public Map<String,Object> getChinaData(){

        Map<String,Object> map= covidMapper.getChinaData();
        System.out.println("这天的中国疫情数据（作为饼图）"+map);
        return map;
    }

2 查询省市下拉菜单后的图表更新
效果图如下：

代码：

function dothat() {
        var data = $("#addForm").serialize();
        console.log(data);
        $.ajax({
          type:'post',
          url:'getAreaDetail',
          cache: false,
          data:data,  //重点必须为一个变量如：data
          async:false,
          dataType:'json',
          success:function(dataform){
            //console.log(dataform.currentConfirmedCount);
            //console.log(dataform.provinceCity);
            var chartDom = document.getElementById('areaDetail');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
              title:{
                text:'该地区详情',
                left:'center',
                textStyle:{

                }
              },
              color:['#AE212C','#EE6666','#FAC858','#91CC75',,'#5D7092'],
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '10%',
                data: ['累计确诊','现存确诊','疑似确诊','治愈','死亡'],
                left: 'center'
              },
              series: [
                {
                  name: '该地区',
                  type: 'pie',
                  radius: ['47%', '70%'],
                  top:'10%',
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    normal: {
                      show: false,
                      position: 'center',
                      formatter:'{b}\n{c}人',
                      textStyle:{
                        fontSize:'30',
                        fontweight:'bold',
                      }
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value:98,name:'累计确诊'},
                    {value: 7, name: '现存确诊'},
                    {value: 0, name: '疑似确诊'},
                    {value:91, name: '治愈'},
                    {value: 0, name: '死亡'}
                  ]
                }
              ]
            },

            option.title.text=dataform.provinceCity+'详情\n  ';
            option.series[0].name=dataform.provinceCity;
            option.series[0].data[0].value=dataform.confirmedCount;
            option.series[0].data[1].value=dataform.currentConfirmedCount;
            option.series[0].data[2].value=dataform.suspectedCount;
            option.series[0].data[3].value=dataform.curedCount;
            option.series[0].data[4].value=dataform.deadCount;

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

后端代码：

 @ResponseBody
    @RequestMapping("getAreaDetail")
    public Map<String, Object> selectResponse(HttpServletRequest request){
/**
接收表单参数，并调用数据库获取对应的数据 以Map的格式传递给前端
这部分代码不便展示（摘录在论文中）
**/
}

3.使用的数据库表
数据库的数据图如下：