疫情数据分析平台（八）：数据可视化展示

该项目疫情数据分析平台其中一大功能便是数据可视化。我们数据可视化分为若干部分，其中疫情地图由我来完成，而其他内容由其他成员完成。绘制好数据可视化的图表后，将通过后端传入前端。由于绘制的图表为动态，格式为html，即绘制成一个网页文件。面对这种情况，和后端沟通后，采取了这样的一种传输方式：前端首先根据用户选择图表类型及地区，将用户想要看的图表以名字的形式传入后端，后端给出对应的文件名字传回前端，前端根据这一文件名再次请求对应的文件接口（已经通过后端生成对应的网址），而前端获得该地址后则可以通过网址显示对应内容。

针对通过网址显示内容，我采取的方法是用iframe加载对应的文件，嵌套在子页面中。唯一的缺点是面对后端如此大的文件，服务器环境略显吃力。

首先设计对应的页面：

设计思路与之前一致，利用eltab装对应的内容，进行排布。首先用户可以选择地图上的地区，左键点击进入对应的地区可视化页面，默认展现的可视化图为新增确诊。同时，在可视化页面中，用户可以根据左边的选择框选择对应的国家和图表类型来生成不同的图表。

这里需要用到与之前疫情政策相似的ajax局部刷新技术，借助vue的特别方法实现。首先建立form，与data里的变量双向绑定：

<el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="国家选择">
              <el-select  placeholder="选择国家" v-model="country">
                <el-option
                  v-for="con in countries"
                  :key="con"
                  :value="con"
                  :label="con"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择图表类型">
              <el-select  placeholder="选择图表类型" v-model="chartType">
                <el-option
                  v-for="one in selectdata"
                  :key="one"
                  :value="one"
                  :label="one"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

 

data(){
    return{
      selectdata:['新增确诊','疫苗接种人数','阳性率','ICU病人','繁殖率','新增死亡','新增疑似病历'],
      countries:[],
      predataarr:[],
      country:'',
      chartType:'',
      countrySelected:'',
      typeSelected:'新增确诊',
      region:''
    }

默认传入新增确诊。

之后在watch方法中监视变量：

watch:{
    regionName:function (newval,oldval){
      this.region=newval
      this.countrySelected=newval
    }

watch:{
    type:function (newval,oldval){
      this.charttype=newval
      //this.loadChart()
    },
    country:function (newval,oldval){
      this.countrySelected=newval
      //this.loadChart()
    },
    dataChange:{
      handler(newval,oldval){
        this.loadChart()
      }
    }
  },

注意由于需要的是两个选择框只要有变化即进行刷新，其一或其二变化都需要刷新，于是需要先将两个变量利用computed封装为一个组：

computed:{
    dataChange(){
      const {type,country}=this
      return {type,country}
    }
  },

一旦dataChange（）这一函数变化，则在watch中监视到，执行相应的处理函数，即再次请求。

loadChart(){
      var _this=this
      console.log(_this.countrySelected)
      console.log(_this.charttype)
      this.$axios.get('/File/1?region='+_this.countrySelected+'&type='+_this.charttype).then(resp=>{
        if(resp&&resp.status===200){
          _this.strName=resp.data.value
          console.log(resp.data.value)
          _this.url='http://120.78.196.243:8443/'+_this.strName
        }

      }).then(()=>{

      })
    }

再请求即可。最后效果：