echarts地图上绘制柱状图

最近做大屏项目要实现一个如图效果：在地图上绘制柱状图

记录一下实现过程，方便下次cv

<template>
  <div ref="myEchart" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";
import qianjiangJson from "./qianjiang.json";

const props = defineProps(["echartData"]);
const myEchart = ref(null);
let myChart = null;

onMounted(() => {
  initChart();
  // 在窗口大小变化时重新渲染图表
  window.addEventListener("resize", function () {
    myChart.resize();
    renderEachBar(rawData, nameArr);
  });
});

watch(
  props,
  (newValue) => {
    if (newValue) {
      nextTick(() => {
        initChart();
      });
    }
  },
  { immediate: true, deep: true }
);

const initChart = () => {
  echarts.registerMap("qianjiang", qianjiangJson);
  if (myChart) {
    setOption(props.echartData);
  } else {
    myChart = echarts.init(myEchart.value);
  }
};

const rawData = [
  { name: "百丈镇", value: [10.6, 9.1, 7.1] },
  { name: "鸬鸟镇", value: [4.6, 13.1, 2.1] },
  { name: "黄湖镇", value: [10.6, 9.1, 7.1] },
  { name: "瓶窑镇", value: [10.6, 9.1, 7.1] },
  { name: "径山镇", value: [10.6, 9.1, 7.1] },
  { name: "运河街道", value: [10.6, 9.1, 7.1] },
  { name: "东湖街道", value: [10.6, 9.1, 7.1] },
  { name: "塘栖镇", value: [100.6, 9.1, 7.1] },
  { name: "中泰街道", value: [4.6, 13.1, 2.1] },
  { name: "闲林街道", value: [10.6, 9.1, 7.1] },
  { name: "余杭街道", value: [10.6, 9.1, 7.1] },
  { name: "五常街道", value: [10.6, 9.1, 7.1] },
  { name: "仓前街道", value: [10.6, 9.1, 7.1] },
  { name: "仁和街道", value: [10.6, 9.1, 7.1] },
  { name: "崇贤街道", value: [100.6, 9.1, 7.1] },
  { name: "星桥街道", value: [4.6, 13.1, 2.1] },
  { name: "乔司街道", value: [10.6, 9.1, 7.1] },
  { name: "南苑街道", value: [10.6, 9.1, 7.1] },
  { name: "临平街道", value: [10.6, 9.1, 7.1] },
  { name: "良渚街道", value: [10.6, 9.1, 7.1] },
];

var geoCoordMap = {
  百丈镇: [119.7284, 30.5082],
  鸬鸟镇: [119.7084, 30.4282],
  黄湖镇: [119.7994, 30.4582],
  瓶窑镇: [119.9094, 30.4082],
  径山镇: [119.8094, 30.3582],
  余杭街道: [119.9094, 30.2882],
  中泰街道: [119.8594, 30.2082],
  闲林街道: [119.9594, 30.2082],
  五常街道: [120.0294, 30.2582],
  仓前街道: [119.9694, 30.2892],
  运河街道: [120.2704, 30.4882],
  塘栖镇: [120.2004, 30.4582],
  仁和街道: [120.1004, 30.4582],
  崇贤街道: [120.1504, 30.4082],
  东湖街道: [120.2964, 30.4482],
  临平街道: [120.2534, 30.4382],
  星桥街道: [120.2364, 30.3902],
  乔司街道: [120.2464, 30.3402],
  南苑街道: [120.2934, 30.3882],
  良渚街道: [120.0294, 30.3882],
};
var nameArr = ["矛盾纠纷", "风险"];
var colorArr = ["#ffff00", "#ec808d"];

const renderEachBar = (rawData, nameArr) => {
  let options = {
    legend: [],
    xAxis: [],
    yAxis: [],
    grid: [],
    series: [],
  };

  options.legend.push({
    data: nameArr,
    left: "70%",
    top: "bottom",
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: "#ddd",
      fontSize: 10,
    },
  });

  echarts.util.each(rawData, function (dataItem, idx) {
    var geoCoord = geoCoordMap[dataItem.name];
    var coord = myChart.convertToPixel("geo", geoCoord);
    idx += "";

    const maxValue = rawData.reduce((max, item) => {
      const currentMax = Math.max(...item.value);
      return Math.max(max, currentMax);
    }, -Infinity);

    options.xAxis.push({
      id: idx,
      gridId: idx,
      type: "category",
      name: dataItem.name,
      nameTextStyle: {
        color: "#fff",
        fontSize: 10,
      },
      nameLocation: "middle",
      nameGap: 3,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#bbb",
        },
      },
      data: [dataItem.name],
    });
    options.yAxis.push({
      id: idx,
      gridId: idx,
      show: false,
    });
    options.grid.push({
      id: idx,
      width: 50,
      height: 40,
      left: coord[0] - 15,
      top: coord[1] - 35,
    });

    for (var i = 0; i < nameArr.length; i++) {
      options.series.push({
        name: nameArr[i],
        zlevel: 1,
        type: "bar",
        xAxisId: idx,
        yAxisId: idx,
        barGap: 0,
        barCategoryGap: 0,
        barWidth: "10%",
        itemStyle: {
          color: colorArr[i],
        },
        data: [dataItem.value[i]],
        min: 0,
        max: maxValue,
      });
    }
  });
  myChart.setOption(options);
};

const setOption = (data) => {
  myChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    geo: {
      map: "qianjiang",
      label: {
        show: false,
      },
      top: "center",
      left: "center",
      roam: false,
      zoom: 1.01,
      itemStyle: {
        areaColor: "#0c274b",
        borderColor: "#fff",
        shadowColor: "#00D8FF",
        shadowBlur: 10,
        borderWidth: 1,
      },
    },
    series: [
      {
        geoIndex: 0,
        name: "余杭区",
        type: "map",
        map: "qianjiang",
        top: "center",
        left: "center",
        label: {
          show: true,
          color: "#fff",
        },
        itemStyle: {
          areaColor: "#0c274b",
          borderColor: "#1cccff",
          borderWidth: 1,
          label: {
            show: true,
            color: "#fff",
            fontSize: "10",
          },
        },
        //鼠标移入
        emphasis: {
          show: false,
          label: {
            show: true,
          },
          itemStyle: {
            areaColor: "rgb(255,255,0,.5)",
            color: "rgb(255,255,255)",
          },
        },
      },
    ],
  });
  renderEachBar(rawData, nameArr);
};
</script>