vue集成echarts 绘制中国地图

原创已于 2023-02-13 09:53:32 修改 · 892 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

于 2023-02-13 09:50:52 首次发布

前端vue 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在项目中遇到的展示中国地图的需求，由于Echarts5.0及以上版本移除了中国地图，作者提供了在Echarts4.8版本下如何集成并显示中国地图的代码示例，包括引入china.js文件，设置地图选项以及数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具，但发现官网没有关于中国地图的组件，经过了解，echarts 5.0以上将中国地图去掉了，需要用到china.js 文件官网没有了网络上倒是有些资源。我们集成的是echarts 4.8.则不需要引入china.js文件可通过 console.log(echarts.version); 来查看echarts 版本，
下面看效果
yisha

如果是echarts 5.0以下直接复制代码即可

<template>
  <div>
    <div id="map" :style="{ height: '560px', width: '520px' }"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/map/js/china.js';

export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      let chinaMap = echarts.init(document.getElementById("map"));
      window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (e) {
            return e.value === "NaN" ? e.name + "：" + '0' : e.name + "：" + e.value + " <br/>" + "66c";
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        visualMap: {
          min: 0,
          max: 10000,
          left: 10,
          bottom: 10,
          showLabel: !0,
          text: ["高", "低"],
          textStyle: {
            color: '#000'
          },
          pieces: [{
            gt: 100,
            label: "> 100",
            color: "#7f1533"
          }, {
            gte: 10,
            lte: 100,
            label: "10 - 100",
            color: "#ff5428"
          }, {
            gte: 1,
            lt: 10,
            label: "1 - 9",
            color: "#ff8c71"
          }, {
            gt: 0,
            lt: 1,
            label: "1",
            color: "#ffd768"
          }, {
            value: 0,
            color: "#ffffff"
          }],
          show: !0
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        geo: {
          map: "china",
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1.23,
          // top: 120,
          label: {
            normal: {
              show: !0,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            roam: false,
            geoIndex: 0,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {name: '上海', value: 10},
              {name: '广东', value: 100},
              {name: '山东', value: 5999}
            ]
          }
        ]
      });
    }
  }
};
</script>