可视化相关知识点与遇到的坑（持续更新）

一些可以利用的网站

• 阿里的国内GeoJson地理数据
• 可视化社区，案例较多
• isqqw，echarts图表集

echarts搭建，解耦(容器和options分离)

vue3+TS 搭建

// main.js中引用
import * as Echarts from 'echarts';
// 如果用到地图需要引用
import GansuGeoMap from './assets/lib/gansu.json';
Echarts.registerMap('gansuMap', GansuGeoMap as any);

解耦

// 创建个EchartsContainer.vue容器
<script lang='ts' setup>
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import { onMounted, ref } from 'vue';
// 基于准备好的dom，初始化echarts实例
const echartsContainer = ref<HTMLElement>()

const { option } = defineProps<{ option: EChartsOption }>()

onMounted(() => {
  if (echartsContainer.value) {
    const myChart = echarts.init(echartsContainer.value);
    myChart.setOption(option);
  }
})
</script>

<template>
  <div ref="echartsContainer" w="full" h="full" px="4"></div>
</template>

options配置

// options很简单，直接写return里，如这个地图例子
interface itemType {
  name: string;
  value: number;
}
export default function (data: itemType[]) {
  return {
    geo: {
      show: true,
      type: "map",
      map: "gansuMap", // chinaMap需要和registerMap中的第一个参数保持一致
      roam: false, // 设置允许缩放以及拖动的效果
      // 高亮状态下的多边形和标签样式
      emphasis: {
        label: {
          show: true,
          color: "red",
          fontSize: 18,
          fontWeight: 600,
        },
      },
      // 默认标签样式
      label: {
        show: true,
        color: "black",
        fontSize: 10,
      },
      // 视角的缩放比例
      // zoom: 1.1,
      // 位置调整
      // center: [100, 27],

      zoom: 1.0, // 增加缩放级别
      center: [102, 39], // 调整中心点
    },
    series: [
      {
        type: "map",
        map: "gansuMap",
        geoIndex: 0,
        data: data,
      },
    ],
    backgroundColor: "transparent",
  };
}

如何使用

// 引用options配置，创建实例然后挂载到容器节点上
<script lang="ts" setup>
import { ref } from "vue";
import GansuMap from "./options/map-gansu";
import EchartsContainer from "./EchartsContainer.vue";
const data = ...
const option = ref(GansuMap(data) as any);
</script>

<template>
    <EchartsContainer ml-10 class="flex-1" :option="option" />
</template>