Echarts()

echarts中已有的地图

<template>
  <div class="china-chart">
    <div ref="ChinaChart" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "./utils/china-1.js";
export default {
  name: "ChinaChart",
  mounted() {
    /* 定义一个随机函数生成数据 */
    function randomValue() {
      /* Math.round() 四舍五入成整数 */
      /* 生成0-100的随机数整数 */
      return Math.round(Math.random() * 100);
    }
    /* 定义了各个省市的数据 */
    var dataList = [
      { name: "南海诸岛", value: 0 },
      { name: "北京", value: randomValue() },
      { name: "天津", value: randomValue() },
      { name: "上海", value: randomValue() },
      { name: "重庆", value: randomValue() },
      { name: "河北", value: randomValue() },
      { name: "河南", value: randomValue() },
      { name: "云南", value: randomValue() },
      { name: "辽宁", value: randomValue() },
      { name: "黑龙江", value: randomValue() },
      { name: "湖南", value: randomValue() },
      { name: "安徽", value: randomValue() },
      { name: "山东", value: randomValue() },
      { name: "新疆", value: randomValue() },
      { name: "江苏", value: randomValue() },
      { name: "浙江", value: randomValue() },
      { name: "江西", value: randomValue() },
      { name: "湖北", value: randomValue() },
      { name: "广西", value: randomValue() },
      { name: "甘肃", value: randomValue() },
      { name: "山西", value: randomValue() },
      { name: "内蒙古", value: randomValue() },
      { name: "陕西", value: randomValue() },
      { name: "吉林", value: randomValue() },
      { name: "福建", value: randomValue() },
      { name: "贵州", value: randomValue() },
      { name: "广东", value: randomValue() },
      { name: "青海", value: randomValue() },
      { name: "西藏", value: randomValue() },
      { name: "四川", value: randomValue() },
      { name: "宁夏", value: randomValue() },
      { name: "海南", value: randomValue() },
      { name: "台湾", value: randomValue() },
      { name: "香港", value: randomValue() },
      { name: "澳门", value: randomValue() },
    ];
    let ChinaChart = echarts.init(this.$refs.ChinaChart);
    let options = {
      /* 提示框组件 */
      tooltip: {
        formatter: function (params) {
          // console.log(params)
          /* params.seriesName 系列名 在series对象中name属性中定义 */
          /* params.name 数据名称 是series对象中data数组中对象的属性*/
          /* params.value 数据值 是series对象中data数组中对象的值*/
          return (
            params.seriesName + " : " + params.name + " -- " + params.value
          );
        },
      },
      visualMap: {
        min: 0,
        max: 100,
        left: 50,
        bottom: 20,
        text: ["高", "低"],
        inRange: {
          // color: ['#e0ffff', '#006edd']
          color: ["skyblue", "pink"],
        },
        show: true,
      },
      /* 地图的图例组件 */
      // visualMap: {
      //   show: true,
      //   x: 10,
      //   y: 20,
      //   splitList: [
      //     { start: 70, end: 100 },
      //     { start: 60, end: 70 },
      //     { start: 50, end: 60 },
      //     { start: 40, end: 50 },
      //     { start: 30, end: 40 },
      //     { start: 20, end: 30 },
      //     { start: 10, end: 20 },
      //     { start: 0, end: 10 },
      //   ],
      //   color: [
      //     "#5475f5",
      //     "#9feaa5",
      //     "yellow",
      //     "#74e2ca",
      //     "#e6ac53",
      //     "#9fb5ea",
      //     "#FEF5DC",
      //   ],
      // },
      /* 地图的配置项 */
      geo: {
        map: "china",
        /* 控制缩放和拖拽 */
        roam: true,
        /* 按比例放大缩小 */
        zoom: 1,
        /* 地图上面的文字 */
        label: {
          normal: {
            show: true,
            fontSize: "12",
            color: "rgba(0,0,0,0.7)",
            // offset:[0,0]
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {
            areaColor: "red",
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      /* 地图的数据 */
      series: [
        {
          name: "hhjklnkl",
          type: "map",
          geoIndex: 0,
          /* 把省份数据塞到data中 */
          data: dataList,
        },
      ],
    };

    ChinaChart.setOption(options);
    
    window.ChinaChart = ChinaChart;
  },
};
</script>

<style>
</style>
复制代码

echarts中没有的地图需要先注册

<template>
  <div class="china-map">
    <div ref="ChinaMap" class="china"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { chinaJson } from "./utils/chinaMap.js";
export default {
  name: "ChinaMap",
  mounted() {
    /* 在echarts中注册地图 */
    echarts.registerMap("china1", chinaJson);
    let ChinaMap = echarts.init(this.$refs.ChinaMap);
    ChinaMap.setOption({
      title: {
        text: "中国轮廓地图",
        top: "3%",
        left: "center",
        textStyle: {
          fontSize: 20,
          fontWeight: 600,
          color: "#fff",
        },
      },
      tooltip: {
        // 触发类型, 数据项图形触发
        trigger: "item",
        backgroundColor: "#fff",
        textStyle: {
          color: "#000",
        },
        /* 可以使用formatter再加上div实现自定义的提示组件 */
        formatter: function (val) {
          return (
            val.data.name +
            "<div>" +
            '<h2><img src="' +
            val.data.url +
            '"  height="120px"></h2>' +
            "<p>" +
            val.data.value +
            "</p>" +
            "</div>"
          );
        },
      },
      series: [
        {
          type: "map",
          /* 这里的map值需要和registerMap注册的名字相一致 */
          map: "china1",
          roam: true, //是否开启鼠标缩放和平移漫游
          geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
          label: {
            normal: {
              show: true, //显示省份标签
              textStyle: { color: "#fff" }, //省份标签字体颜色
            },
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              textStyle: { color: "#fff" },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 1.95, //区域边框宽度
              borderColor: "#0550c3", //区域边框颜色
              areaColor: "#000", //区域颜色
            },

            emphasis: {
              borderWidth: 1.95, //鼠标滑过区域，区域边框宽度
              borderColor: "#fff", //鼠标滑过区域，区域边框颜色
              areaColor: "#ff6511", //鼠标滑过区域背景色
            },
          },
          data: [
            {
              name: "北京",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "中国帝都",
            },
            {
              name: "上海",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "天津",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "重庆",
              url: "https://pic3.zhimg.com/50/v2-497f0ce3c5a4f21c447edb9f08012a2f_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "河北",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "山东",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "陕西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "山西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "辽宁",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "吉林",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "黑龙江",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "宁夏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "江苏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "河南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "安徽",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "浙江",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "湖南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "湖北",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "甘肃",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "青海",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "西藏",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "新疆",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "内蒙古",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "贵州",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "四川",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "江西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "福建",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "广东",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "广西",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "云南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "海南",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "香港",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "澳门",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
            {
              name: "台湾",
              url: "https://pic4.zhimg.com/50/v2-aa7a3d295d326b7b3c465182adbb0e2b_hd.jpg",
              value: "好邻居！可玩的地儿多的数不过来！",
            },
          ],
        },
      ],
    });
    window.ChinaMap = ChinaMap;
  },
};
</script>

<style scoped>
.china {
  border-radius: 10px;
  height: 500px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.9);
}
.china-map {
  border-radius: 10px;
  background: #000;
}
</style>