vue3 +Echarts+ts 不同地区根据条件显示不同颜色

阿怪睡不着

已于 2024-04-08 14:07:36 修改

阅读量285

点赞数 3

文章标签： echarts 前端

于 2024-03-29 11:42:00 首次发布

本文链接：https://blog.csdn.net/qq_43751614/article/details/137140239

版权

一、下载echarts、axios

二、代码如下

<template>
  <div id="main" class="map" ref="mapDom"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import echartMap from "./echartMap.ts";
import * as echarts from "echarts";
// 获取dom
const mapDom: any = ref(null);
// 获取地图的数据
let mapData: any = ref([]);
//处理数据的方法函数
let mapRender = echartMap();
onMounted(() => {
  // 初始化画布
  var map = echarts.init(mapDom.value);
  axios
    .get(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`)
    .then((res: any) => {
      mapData.value = res.data;
      // registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图
      echarts.registerMap("china", res.data);
      // 这个调用是进行地图的渲染
      map.setOption(mapRender(res.data.features));
    });
});
</script>
<style>
.map {
  height: 900px;
  margin: auto;
}
</style>

echartMap.ts

export default () => {
  const mapRender = (data: any = [], mapData: any = []) => {
    let mapLocal: any = [];
    mapData.forEach((value: any, index: number) => {
      console.log(value.properties.name);
      mapLocal.push(value.properties.name);
    });
    //特殊城市
    let city = ["北京", "重庆", "上海", "天津"];
    let area: any = {
      内蒙古: "内蒙古自治区",
      新疆: "新疆维吾尔自治区",
      广西: "广西壮族自治区",
      宁夏: "宁夏回族自治区",
      西藏: "西藏自治区",
      澳门: "俺们特别行政区",
      香港: "香港特别行政区",
    };
    // 处理字典
    let result = data.map((i: any, index: number) => {
      let name = "";
      if (city.find((x: any) => x === i.properties.name)) {
        name = i.properties.name + "市";
      } else if (area[i.properties.name]) {
        name = area[i.properties.name];
      } else {
        name = i.properties.name + "省";
      }
      return {
        name: i.properties.name,
        value: Number(i.properties.adcode), //将省的id作为Value,看需求可更改
        itemStyle:
          Number(i.properties.adcode) < 100000
            ? { color: "#313695" }
            : Number(i.properties.adcode) < 200000
            ? { color: "#4575b4" }
            : Number(i.properties.adcode) < 300000
            ? { color: "#74add1" }
            : Number(i.properties.adcode) < 400000
            ? { color: "#abd9e9" }
            : Number(i.properties.adcode) < 500000
            ? { color: "#a7ce89" }
            : Number(i.properties.adcode) < 600000
            ? { color: "#9fe080" }
            : Number(i.properties.adcode) < 700000
            ? { color: "#40b27d" }
            : { color: "#fdae61" },
      };
    });
    // echarts 的数据配置选项 具体看官网
    let option = {
      title: {
        text: "中国地图",
        left: "right",
        triggerEvent: true,
      },
      tooltip: {
        trigger: "item",
        showDelay: 0,
        transitionDuration: 0.2,
      },
      visualMap: {},
      series: [
        {
          name: "中国地图",
          type: "map",
          roam: true,
          map: "china",
          // 设置地图的文字
          label: {
            show: true,
            fontSize: 8,
            color: "#fff",
          },
          emphasis: {
            label: {
              show: true,
            },
          },
          data: result,
        },
      ],
    };
    return option;
  };
  return mapRender;
};