vue-echarts绘制地图轮廓

记录Echarts + Vue 踩坑

使用Echarts 来 绘制地图轮廓图
第一步 要引入 Echarts
引入Echarts/map/ 下的 地区.js 文件
第二步 在视图中， 放置地图容器
第三步 配置地图 option
第四步 将option 挂载到 Echarts

完成代码如下

<!-- 地图容器 -->
 <div ref="map" style="height:600px;width:600px;"></div>

// 引入地图js 文件
import "echarts/map/js/province/zhejiang.js";
// 引入Echarts
import echarts from "echarts";
// 引入Echarts 的 option 配置
import option from "./map-option.js";


  // 加载地图
mapEchartsInit() {
    // 获取视图容器地图
      var myChart = this.$echarts.init(this.$refs.map);
      // 将option 挂载到Echarts 中， 这块 option 在 一个单独得js文件，看你需求配置
      myChart.setOption(option, true);
    }
// 在Vue 生命周期 mounted中执行加载地图事件
mounted() {
this.mapEchartsInit();
}

// 配置项文件 option

export default {
  title: {
    text: "订阅我博客的人群分布",
    subtext: "纯属虚构",
    x: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    x: "left",
    data: ["iphoneX"]
  },
  dataRange: {
    min: 0,
    max: 2500,
    x: "left",
    y: "bottom",
    text: ["max", "min"],
    calculable: true
  },
  toolbox: {
    show: true,
    orient: "vertical",
    x: "right",
    y: "center",
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  roamController: {
    show: true,
    x: "right",
    mapTypeControl: {
      china: true
    }
  },
  series: [
    {
      name: "iphoneX",
      type: "map",
      mapType: "浙江",
      roam: false,
      itemStyle: {
        normal: { label: { show: true } },
        emphasis: { label: { show: true } }
      },
      data: [
        { name: "湖州市", value: 130 },
        { name: "杭州市", value: 666 },
        { name: "丽水市", value: 200 },
        { name: "金华市", value: 1111111 },
        { name: "嘉兴市", value: 300 },
        { name: "舟山市", value: 10 },
        { name: "台州市", value: 70 },
        { name: "温州市", value: 50 },
        { name: "丽水市", value: 877 },
        { name: "绍兴市", value: 1000 }
      ]
    }
  ]
};

效果如下：

如有更好的方案可以联系我:

微信： daxin261

关注公众号 获取更多 "前端资讯"

:

参考文章：

前端学习 之 Vue 引入Echarts地图

地图JSON 资源

DATAV 提供地图数据