Echarts地图柱状图问题

1、Echarts地图柱状图问题

需要根据功能修改自己所需的地图模块，当前功能是根据line和散点图进行处理，根据经纬度形成一个柱状图，

比如：需要两个或者多个柱状图

1、添加多个经纬度，添加多个柱状图。经纬度跟柱状图一一对应

2、根据定位，自己写柱状图。一一添加到地图上去。分为两个部分，1.Echarts地图,2.柱状图，可以写div

2、Echarts地图饼状图问题

需要渲染地图成功后，再通过setOption添加series。

3、柱状图例子

河南省经纬度数据【js/Map/henan.json · 梦_阿飞/allStaticResources - Gitee.com】

npm install echarts -S

<template>
  <div class="DataList">
    <div class="Echart-map" id="echartmapWidth">
        <div id="echart" ref="echart"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { useStore } from "vuex";
import hnJson from "@/utils/henan.json";
import { onMounted, onUnmounted, watch, ref, computed } from "vue";
export default {
  name: "DataList",
  setup() {
    let echart = echarts;
    let echartMap = null;
    let geoCoordMap = {};
    let sddf = [];
    let option = {
      series: [],
    };
    const store = useStore();
    const state = store;
    let isCollapse = ref(
      computed(() => {
        return state.state.app.isCollapse;
      })
    );
    const loading = ref(false);
    
    let screenWidth = ref(
      window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
    );
    let timer = ref(false); //处理监听
    watch(screenWidth, () => {
      if (!timer.value) {
        timer.value = true;
        setTimeout(function () {
          timer.value = false;
          echartMap.resize();
        }, 100);
      }
    });
    watch(isCollapse, () => {
      setTimeout(() => {
        echartMap.resize();
      }, 300);
    });
    const customerBatteryCityData = [];
    hnJson.features.map((item) => {
      geoCoordMap[item.properties.name] = item.properties.center;
      var data = {
        name: item.properties.name,
        value: item.properties.adcode,
      };
      customerBatteryCityData.push(data);
    });

    const initChart = () => {
      echart.registerMap("henan", hnJson);
      echartMap = echart.init(document.getElementById("echart"));

      echartMap.setOption({
        backgroundColor: "#131C38",
        tooltip: {
          // borderWidth: 0,
          trigger: "item",
          show: true,
          enterable: true,
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          backgroundColor: "rgba(0,2,89,0.8)",
          formatter: "{b}<br />{c}",
        },
        geo: [
          {
            map: "henan",
            aspectScale: 0.9,
            roam: false, // 是否允许缩放
            // zoom: 1.2, // 默认显示级别
            zoom: 1, // 默认显示级别
            layoutSize: "70%",
            silent: false, //点击
            layoutCenter: ["45%", "55%"],
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 400,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,0.3)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,0.3)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: "#4ecee6",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37,108,190,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(15,169,195,1)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
            emphasis: {
              // itemStyle: {
              //   areaColor: "#0160AD",
              // },
              label: {
                show: true,
                color: "#fff",
              },
            },
            zlevel: 3,
            label: {
              show: true,
              color: "#fff",
            },
          },
        ],
        series: [
          {
            geoIndex: 0,
            showLegendSymbol: true,
            type: "map",
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {},
            map: "henan", // 使用
            data: customerBatteryCityData,
            select: {
              disabled: true,
              label: {
                color: "#fff",
              },
            },
            emphasis: {
              label: {
                color: "#fff",
              },
            },
          },
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              // period: 4, //箭头指向速度，值越小速度越快
              // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              // symbol: 'arrow', //箭头图标
              // symbol: imgDatUrl,
              symbolSize: 5, // 图标大小
            },
            lineStyle: {
              width: 17, // 尾迹线条宽度
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              opacity: 1, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: "end",
              formatter: "245",
            },
            silent: true,
            data: lineData(),
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: true,
              position: "top",
              // formatter: (params) => this.data[params.dataIndex].value,
              formatter: function (params) {
                return customerBatteryCityData[params.dataIndex].value;
              },
              padding: [4, 8],
              // backgroundColor: "#fff",
              borderRadius: 5,
              // borderColor: "#fff",
              borderWidth: 1,
              // color: "#fff",
            },
            symbol: "diamond",
            symbolSize: [15, 8],
            // symbolSize: [0, 0],
            itemStyle: {
              // color: "red",
              color: "#fff",
              opacity: 1,
            },
            silent: true,
            data: scatterData(),
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 4,
            // label: {
            //   formatter: "{b}",
            //   position: "top",
            //   color: "#fff",
            //   fontSize: 12,
            //   distance: 10,
            //   show: true,
            // },
            symbol: "diamond",
            symbolSize: [17, 8],
            itemStyle: {
              // color: '#F7AF21',
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              opacity: 1,
              // shadowColor: '#fff',
              // shadowBlur: 5,
              // shadowOffsetY: 2
            },
            silent: true,
            data: scatterData2(),
          },
        ],
      });
      echartMap.resize();
      // 执行完地图讲serier用setOption重新塞入
    };
    // 动态计算柱形图的高度（定一个max）
    const lineMaxHeight = () => {
      const maxValue = Math.max(
        ...customerBatteryCityData.map((item) => item.value)
      );
      return 0.9 / maxValue;
    };
    // 柱状体的主干
    const lineData = () => {
      return customerBatteryCityData.map((item) => {
        return {
          coords: [
            geoCoordMap[item.name],
            [
              geoCoordMap[item.name][0],
              geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
            ],
          ],
        };
      });
    };
    // 柱状体的顶部
    const scatterData = () => {
      return customerBatteryCityData.map((item) => {
        return [
          geoCoordMap[item.name][0],
          geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
        ];
      });
    };
    // 柱状体的底部
    const scatterData2 = () => {
      return customerBatteryCityData.map((item) => {
        return {
          name: item.name,
          value: geoCoordMap[item.name],
        };
      });
    };
    const destroyedChart = () => {
      echartMap.dispose();
    };
    // // 地图饼状图
    const mapPie = () => {
      // 地图饼状图
      sddf = [
        {
          type: "pie",
          radius: "5%",
          // 设置成绝对的像素值
          center: echartMap.convertToPixel("geo", [113.238266, 35.23904]),
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 100, name: "搜索引擎" },
            { value: 735, name: "直接访问" },
          ],
        },
        {
          type: "pie",
          radius: "5%",
          // 设置成绝对的像素值
          center: echartMap.convertToPixel("geo", [113.883991, 35.302616]),
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 484, name: "联盟广告" },
            { value: 300, name: "视频广告" },
          ],
        },
      ];
      option.series = sddf;
      echartMap.setOption(option);
    };
    const search = () => {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    };

    onMounted(() => {
      initChart();
      // // mapPie()
      window.onresize = () => {
        return (() => {
          window.screenWidth =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
          screenWidth.value = window.screenWidth;
        })();
      };
    });
    onUnmounted(() => {
      // destroyedChart();
    });
    return {
      initChart,
      destroyedChart,
      mapPie,
      search,
      screenWidth,
      timer,
      loading,
      isCollapse,
    };
  },
};
</script>
<style scoped lang='scss'>
.Echart-map {
  overflow: hidden;
  width: 100%;
}
#echart {
  width: 100%;
  height: 500px;
  padding: 16px;
}
</style>