【毕设Day8】

前言

第8天啦！！！加油加油加油！！！

---

一、新建省份地图

1.echarts.js文件增加provinceMap方法

//省份地图---
                    provinceMap(id, cityName, data) {
                        // 绘制线
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {
                                formatter: function (data) { //data={name:'',value:''}
                                    //注意return的符号，不是单引号
                                    return `
                                    <div>市:${data.name} <div> 现在确诊人数:${data.value}</div></div>
                                    `
                                }
                            },
                            visualMap: [{
                                orient: "vertical",
                                type: "piecewise",
                                pieces: [ // 配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 10,
                                        color: "#FDFDCF"
                                    },
                                    {
                                        min: 10,
                                        max: 100,
                                        color: "#FE9E83"
                                    },
                                    {
                                        min: 100,
                                        max: 500,
                                        color: "#E55A4E"
                                    },
                                    {
                                        min: 500,
                                        max: 10000,
                                        color: "#4F070D"
                                    }
                                ]
                            }],
                            series: [{
                                name: "市",
                                type: "map",
                                // 将城市名传过来
                                map: cityName,
                                zoom: 1.2, //放大
                                label: {
                                    show: true, //是否显示省份名称
                                    fontSize: 9,
                                },
                                data
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },

2.utils/map.js新建地图的引入文件

import 'echarts/map/js/china';
import 'echarts/map/js/world'
import 'echarts/map/js/province/beijing';
import 'echarts/map/js/province/shanghai';
import 'echarts/map/js/province/neimenggu';
。
。
。

main.js文件导入map.js地图的js文件

//地图的js文件
import './utils/map.js';

二、City.vue页面

1.增加显示地图的容器

  <div>
    <h1>城市页面--展示城市的地图</h1>
    <div id="cityMap"></div>
  </div>
#cityMap {
  width: 6rem;
  height: 6rem;
  margin: 0 auto;
}

2.对数据进行处理

地图数据格式为：[{name:’’,value:’’}]
拿到的res.data.retdata.subList格式为

进行数据的处理并且传参调用$echarts.provinceMap

    this.$api.cityData({
        //将参数给cityData方法（api/index.js）
        city: this.$route.params.city,
      })
      .then((res) => {
        console.log(res.data.retdata);
        //[{name:'',value:''}]
        // 进行数据的处理
        let arr = [];
        res.data.retdata.subList.forEach((element) => {
          let temp = {};
          temp.name = element.city;
          temp.value = element.confirm;
          arr.push(temp);
        });
        // 传参调用$echarts.provinceMap方法
        this.$echarts.provinceMap("cityMap", this.$route.params.city, arr);
      });

3.解决问题：api数据与echarts数据的匹配

使用test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false。

    this.$api.cityData({
        //将参数给cityData方法（api/index.js）
        city: this.$route.params.city,
      })
      .then((res) => {
          console.log(res.data.retdata);
          //[{name:'',value:''}]
          // 进行数据的处理
          let temp = {};
          // 使用test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false
          var reg = /北京|上海|天津/;
          if (reg.test(this.$route.params.city)) {
            temp.name = element.city;
          } else {
            temp.name = element.city + "市";
          }
          temp.value = element.confirm;
          arr.push(temp);
        });
        // 传参调用$echarts.provinceMap方法
        this.$echarts.provinceMap("cityMap", this.$route.params.city, arr);
      });

不足：新疆等地区存在州等没有匹配