echars地图相关

<template>
  <div class="content">
    <div ref="charts" style="width: 700px; height: 700px"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/mapJson/data-city.json";
export default {
  data() {},
  created() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      // 图表的配置项和数据
      const option = {
        // graphic: {
        //   // 水印类型
        //   type: "text",
        //   // 相对于容器的位置
        //   left: "20%",
        //   top: "80%",
        //   // 样式设置
        //   style: {
        //     // 文本内容
        //     text: "风兮梧桐的水印 ",
        //     // 字体粗细、大小、字体
        //     font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
        //     // 字体颜色
        //     fill: "#2775B6",
        //   },
        // },
        graphic: {
          type: "group",
          // 旋转角度
          rotation: Math.PI / 8,
          bounding: "raw",
          left: 180,
          top: 80,
          z: 200,
          children: [
            {
              type: "rect",
              left: "center",
              top: "center",
              z: 100,
              shape: {
                width: 600,
                height: 50,
              },
              style: {
                fill: "#BACCD9",
              },
            },
            {
              type: "text",
              left: "center",
              top: "center",
              z: 100,
              style: {
                fill: "#2775B6",
                text: "风兮梧桐的水印",
                font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              },
            },
          ],
        },

        // 给地图添加标识
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            legendHoverLink: true,
            // 宽喝高
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              // 标志里的内容是否出现
              show: true,
              // 展示的内容是value里面的什么
              formatter(value) {
                return value.data.value[2];
              },
              color: "#fff",
            },
            // 控制标识内的弹窗显示内容
            tooltip: {
              // 提示框背景颜色
              backgroundColor: "red",
              // 提示框文字样式
              formatter(params) {
                return `地区：${params.name}<br/>数值：${params.value[2]}`;
              },
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "D8BC37",
              },
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data: [
              { name: "西藏", value: [91.23, 29.5, 2333] },
              { name: "内蒙古自治区", value: [118.03, 49.01, 200] },
            ],
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            effectType: "ripple",
            showEffectOn: "render",
            rippleEffect: {
              period: 10,
              scale: 10,
              brushType: "fill",
            },

            hoverAnimation: true,
            itemStyle: {
              normal: {
                // 特殊标记点背景颜色
                color: "#2C9678",
                shadowBlur: 5,
                shadowColor: "#248067",
              },
            },
            // 特殊标记cengji
            zlevel: 5,
            // 特殊标记之中渲染的内容
            data: [
              { name: "西藏", value: [91.23, 29.5, 2333] },
              { name: "黑龙江", value: [128.03, 47.01, 1007] },
            ],
          },
        ],
        // 整个背景颜色
        backgroundColor: "#404a59",
        // 提示浮窗样式
        tooltip: {
          // 弹窗是否显示
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          // 提示框背景颜色
          backgroundColor: "#2775B6",
          // 提示框边框颜色
          borderColor: "#BACCD9",
          // 消失延迟
          hideDelay: 100,
          // 触发方式 click
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 10,
            height: 30,
            overflow: "break",
          },
          // 展示延迟
          showDelay: 100,
        },
        // 提示框的特殊层级，可控制显示不显示
        visualMap: {
          // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
          show: true,
          // 上下端文字
          text: ["高", "低"],
          // 最小值和最大值，必须指定
          min: 0,
          max: 6000,
          // 位置
          left: "10%",
          bottom: "10%",
          // 是否展示滑块
          calculable: true,
          // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
          // 控制第几组图标的筛选和层级变化
          seriesIndex: [0],
          // 从下到上的颜色
          inRange: {
            color: ["#00467F", "#A5CC82"],
          },
          //字体颜色
          textStyle: {
            color: "#fff",
            map: "china",
          },
        },
        // 地图配置
        geo: {
          // 单独设置省份颜色变化
          regions: [
            {
              name: "青海省",
              itemStyle: {
                areaColor: "pink",
              },
              // 鼠标放上去高亮的样式
              emphasis: {
                areaColor: "blue",
                borderWidth: 0,
              },
            },
          ],
          map: "china",
          label: {
            // 通常状态下的样式
            normal: {
              // 没有操作的情况下文字是否显示
              show: false,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                // 文字颜色
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#8ABCD1",
              borderWidth: 1,
              areaColor: {
                // 渐变色偏好
                type: "radial",
                x: 0.5,
                y: 0,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BACCD9", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#158BB8", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", zhongguo);
      charts.setOption(option);
      
    },
  },
};
</script>

如图为效果