实现echarts地图

效果图:

2.echarts.registerMap("xizang", XZ) 注册了一个名为 "xizang" 的地图，其中 XZ 是地图数据。

接下来是 option 对象，包含了图表的配置信息，比如图表的布局、提示框样式、地理组件配置和系列数据配置等。

在 tooltip 配置中，定义了鼠标悬停在地图上时显示的提示框样式和内容。内容通过一个自定义的 formatter 函数生成，根据传入的 params 参数动态生成提示框的 HTML 内容。

geo 配置定义了地理坐标系的相关配置，指定了使用的地图类型和是否开启漫游（即是否可以拖动和缩放地图）。

series 配置定义了图表的系列，这里是地图系列。具体配置了地图的样式、数据等信息。

在 data 数组中提供了地图上各个区域的数据，每个数据项包含了区域的名称、数值和额外的自定义数据。

最后，使用 myChart.setOption(option) 将配置应用到图表中，完成图表的初始化设置。

3.

const initData = () => {

  myChart = echarts.init(echartsRef.value);

  echarts.registerMap("xizang", XZ);   注意此位置必须写当前展示区域的名称

  const option = {

    layoutCenter: ["35%", "50%"], //位置

    layoutSize: 700, //大小

    tooltip: {

      trigger: "item",

      axisPointer: {

        type: "line",

        snap: false,

      },

      showContent: true,

      triggerOn: "mousemove",

      confine: true,

      backgroundColor: "#ffffff",

      padding: 15,

      position: "left",

      borderRadius: 10,

      borderColor: "rgba(0,0,0,0)",

      // borderWidth: 1,

      textStyle: {

        color: "white",

        fontStyle: "normal",

        fontWeight: "normal",

      },

      formatter(params) {

        console.log(params, "params");

        if (params && params.data && params.data.value) {

          var htmlText = ``;

          return htmlText;

        }

      },

    },

    geo: {

      map: "xizang",

      roam: false, //开关可移动可放大

    },

    series: [

      {

        type: "map",

        mapType: "xizang",

        showLegendSymbol: false, //去掉指示点

        itemStyle: {

          normal: {

            borderWidth: 1, //区域边框宽度

            borderColor: "#4a87fb", //区域边框颜色

            areaColor: "#f1ffff", //区域颜色

            label: {

              show: true, //是否显示各省名称

              textStyle: {

                color: "#c4cccd", //显示各省名称颜色

              },

            },

          },

          emphasis: {

            borderWidth: 3, //区域边框宽度

            areaColor: "#f1ffff", //区域颜色，鼠标悬停颜色

            label: {

              show: true, //鼠标悬浮时是否显示各省名称

              textStyle: {

                color: "#c4cccd", //鼠标悬浮时显示各省名称的颜色

              },

            },

          },

        },

        data: [

          {

            name: "阿里地区",

            value: "2222",

            shu: "333",

          },

          {

            name: "那曲市",

            value: "22",

            shu: "222",

          },

          {

            name: "日喀则市",

            value: "3",

            shu: "11",

          },

          {

            name: "拉萨市",

            value: "3",

            shu: "1",

          },

          {

            name: "山南市",

            value: "455",

            shu: "222",

          },

          {

            name: "林芝市",

            value: "99",

            shu: "33",

          },

          {

            name: "昌都市",

            value: "99",

            shu: "33",

          },

        ],

      },

    ],

  };

  // 设置图表初始配置

  myChart.setOption(option);

};