市级地图echarts渲染vue2框架

这里以晋城市演示

1. 安装

npm install echarts --save

2. 在图表渲染组件中引入echarts

import * as echarts from ‘echarts’

3. 初始化图表

<div class="comps_map" ref="jincheng"></div>

// 引入echarts
import * as echarts from 'echarts';
// 引入地图json
import jinChengCityMapJson from '@/assets/json/city-map.json';

// 渲染图表方法 vue-methods
drawMap() {
      let that = this;
      that.myChart = echarts.init(this.$refs.jincheng); // 获取图表盒子dom节点
      echarts.registerMap("jincheng", jinChengCityMapJson); // 注册地图
      that.mapData = jinChengCityMapJson.features.map((item, index) => { // 处理地图json数据
        return {
          name: item.properties.name,
          value: Math.floor(Math.random() * 200) + 50,
          id: item.id,
          level: item.properties.level,
          cityCode: item.properties.adcode,
        };
      });
      that.myChart.setOption(
          {
            //数据映射
            visualMap: {
              type: "piecewise", //分段标签
              min: 50, //最小值
              max: 200, //最大值，不设置为无限大
              right: 0, //距离右侧位置
              bottom: 50, //距离底部位置
              orient: "vertical", //组件竖直放置
              align: "left", //色块在左
              textGap: 11, //文字主体之间的距离
              itemSymbol: "circle", //右下角映射组件使用圆点形状
              show: true,
              seriesIndex: 0, //指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。
              //一以下是分段式视觉映射组件的每一段的范围
              //gt：大于、gte：大于等于、lt：小于、lte：小于等于。
              pieces: [
                {
                  gt: 150,
                  label: "150个以上",
                  color: "#427d7a",
                },
                {
                  gte: 100,
                  lte: 150,
                  label: "100-150个",
                  color: "#4a8a87",
                },
                {
                  gte: 50,
                  lte: 100,
                  label: "50-100个",
                  color: "#59a3a0",
                },
              ],
            },
            // 提示浮窗样式
            tooltip: {
              show: true,
              trigger: "item", // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
              alwaysShowContent: false,
              backgroundColor: "#427d7a",
              borderColor: "rgba(0, 0, 0, 0.16);",
              hideDelay: 100,
              triggerOn: "mousemove",
              enterable: true,
              textStyle: {
                color: "#DADADA",
                fontSize: "12",
                width: 20,
                height: 30,
                overflow: "break",
              },
              formatter(params) {
                return `${params.data.name + ":"}</br>供电所数量:${
                    params.data.value
                }`;
              },
              showDelay: 100,
            },
            geo: {
              map: "jincheng",
              type: "map",
              center: [104.114129, 37.550339], //当前视角的中心点
              zoom: 1, //当前视角的缩放比例
            },
            series: [
              {
                name: "jincheng",
                type: "map",
                roam: false,
                mapType: "jincheng",
                data: that.mapData,
                layoutCenter: ["50%", "50%"],
                layoutSize: "92%",
                itemStyle: {
                  normal: {
                    show: true,
                    areaColor: "#59a3a0",
                  },
                },
                emphasis: {
                  itemStyle: {
                    show: true,
                    areaColor: "#2b6461", //鼠标滑过区域颜色
                  },
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff", //鼠标经过字体颜色
                    },
                  },
                },
                select: {
                  // 地图选中区域样式
                  label: {
                    // 选中区域的label(文字)样式
                    color: "#fff",
                  },
                  itemStyle: {
                    // 选中区域的默认样式
                    areaColor: "#2b6461",
                  },
                },
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#000",
                    },
                  },
                },
              },
            ],
          },
          true
      );
    },
// created
created(){
	let that = this;
	that.$nextTick(()=>{
		that.drawMap()
	)
}