echarts实现疫情可视化

2022-06-27

字数统计: 1.5k字 | 阅读时长: 7分

阅读量

已实现的功能

地图下钻，国省市三级联动
疫情趋势可视化

安装echarts

1	npm i echarts

引入中国地图JS

先把大佬的地图js拷贝下来

1	git clone https://gitee.com/MTrun/echarts-map-json.git

1	require("../../map-json/country/china.js");

(如果是JSON文件)

1 2	import china from 'xxx' echarts.registerMap('china',china)

ps:如果只能显示南海诸岛，那就是地图json没引入.

绘制地图

需要一个用来绘制的盒子，设置一定的宽高，初始化echarts实例。

<template>
  <div id="main"></div>
</template>
<style >
#main {
  width: 800px;
  height: 800px;
}

设置每个省市新增疫情数据

接口：https://interface.sina.cn/news/wap/fymap2020_data.d.json.

因为会跨域，所以在vue.config.js中设置代理.

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://interface.sina.cn/news/wap/fymap2020_data.d.json', // 接口域名
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' // 因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
                }
            }
        }
    }
}

axios.get("/api").then((res, err) => {
          if (res.status != 200) reject(err);
          this.resData = res.data.data.list;
          this.resData.forEach((el) => {
            let t = el.value;
            el.value = el.econNum;
            el.econNum = t;
            resolve("ok");
          });

点击去往相应省市

路由跳转，携带省市名称和拼音，把对应的数据存在vuex中(可以用插件实现数据持久化).

mapContainer.on("click", function (params) {
    if (!params.data.ename) {
      alert("暂无" + params.name + "地图数据");
      return;
    }

    _this.$store.commit("setProvince", params.data.city);

    _this.$router.push({
      path: "/province",
      query: { provinceName: params.data.ename, province: params.name },
    });
});

完整代码

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入地图图表，图表后缀都为 Chart
import { MapChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  VisualMapComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import axios from "axios";

export default {
  data() {
    return {
      resData: null,
    };
  },
  created() {},
  computed: {
    nowDate() {
      let date = new Date();
      return (
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1) +
        "月" +
        (date.getDay() + 1) +
        "日"
      );
    },
  },

  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        axios.get("/api").then((res, err) => {
          if (res.status != 200) reject(err);
          this.resData = res.data.data.list;
          this.resData.forEach((el) => {
            let t = el.value;
            el.value = el.econNum;
            el.econNum = t;
            resolve("ok");
          });
        });
        require("../../map-json/country/china.js");
        // 注册必须的组件
        echarts.use([
          TitleComponent,
          TooltipComponent,
          GridComponent,
          DatasetComponent,
          TransformComponent,
          MapChart,
          LabelLayout,
          UniversalTransition,
          CanvasRenderer,
          SVGRenderer,
          VisualMapComponent,
        ]);
      });
    },
    init() {
      let _this = this;
      console.log("初始化实例");
      // 初始化echarts实例
      let mapContainer = echarts.init(document.getElementById("main"));
      // 指定相关的配置项和数据
      var mapBoxOption = {
        title: {
          text: "中国疫情实时地图",
          subtext: this.nowDate,
          left: "center",
        },
        series: [
          {
            type: "map",
            mapType: "china",
            data: this.resData,
            label: {
              show: true, //显示省份标签
              textStyle: {
                color: "blue",
              }, //省份标签字体颜色
              emphasis: {
                //对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: "#800080",
                },
              },
            },
            aspectScale: 0.75, //这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
            zoom: 1.2, //当前视角的缩放比例。
            itemStyle: {
              borderWidth: 0.5, //区域边框宽度
              borderColor: "#009fe8", //区域边框颜色
              areaColor: "#ffefd5", //区域颜色

              emphasis: {
                //鼠标滑过地图高亮的相关设置
                borderWidth: 0.5,
                borderColor: "#4b0082",
                areaColor: "#ffdead",
              },
            },
          },
        ],
        tooltip: {
          //数据格式化
          formatter: function (params) {
            if (params.name == "南海诸岛") return;
            return params.name + "<br />" + "现有确诊：" + params.value;
          },
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            {
              min: 10000,
              label: "10000人及以上",
            }, // 不指定 max，表示 max 为无限大（Infinity）。
            {
              min: 1000,
              max: 9999,
              label: "1000-9999人",
            },
            {
              min: 500,
              max: 999,
              label: "500-999人",
            },
            {
              min: 100,
              max: 499,
              label: "100-499人",
            },
            {
              min: 10,
              max: 99,
              label: "10-99人",
            },
            {
              min: 1,
              max: 9,
              label: "1-9人",
            }, // 表示 value 等于 123 的情况。
            {
              value: 0,
              label: "0人",
              color: "#dddddd3d",
            }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          showLabel: true,
          left: "left",
          top: "bottom",
          inRange: {
            color: ["#dddddd3d", "red"], //取值范围的颜色
          },
          show: true, //图注
        },
      };

      // 使用制定的配置项和数据显示图表
      mapContainer.setOption(mapBoxOption);
      mapContainer.on("click", function (params) {
        if (!params.data.ename) {
          alert("暂无" + params.name + "地图数据");
          return;
        }

        _this.$store.commit("setProvince", params.data.city);

        _this.$router.push({
          path: "/province",
          query: { provinceName: params.data.ename, province: params.name },
        });
      });

      // echart图表自适应
      window.addEventListener("resize", function () {
        mapContainer.resize();
      });
    },
  },
  mounted() {
    this.getData().then(() => {
      this.init();
    });
  },
};
</script>

省级地图

拿到路由参数，去获取对应的省级地图js.

1
2
3

this.provinceName = this.$router.currentRoute.query.provinceName;
this.province = this.$router.currentRoute.query.province;
require(`../../map-json/province/${this.provinceName}.js`);

拿到vuex中的省市疫情数据

1	this.resData = this.$store.state.provinceList;

这里有个小问题,疫情数据变成了NaN。

而直辖市下钻可以正常显示

一开始以为是异步的原因,但打印结果却是正常的.
而只有直辖市可以正常显示，发现省级下面的城市都没有加‘市’，所以匹配不上.拿我只能糊弄下了，遍历数组，给直辖市以外的下级数组都加上‘市’

this.resData.forEach((el) => {
    if(!el.name.includes('市')&&!el.name.includes('区'))
    el.name=el.name+'市'
    let t = el.value;
    el.value = el.econNum;
    el.econNum = t;
});