记录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();
}

// 配置项文件 optionexport 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 提供地图数据

vue-echarts绘制地图轮廓相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
vue+echarts 区域地图绘制（街道）
vue+echarts 区域地图绘制(街道) 1.以下是本人参考别的博主的链接 2.需要用到的资源 3.获取地图JSON (1)[阿里云](http://datav.aliyun.com/portal ...
Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
vue+ echarts实现地图（中国地图）
** vue+ echarts实现地图(中国地图) ** <div class="myChartMap" id="myChartMap" >< ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...
使用vue echarts 制作地图map
第一步:下载相关地区的json文件,并将下载的文件放到项目文件夹下(下载地址:地图选择器) 该篇以显示四川省地区为例第二步:在vue中引入echarts 1.通过 npm 获取 echarts,np ...

vue-echarts绘制地图轮廓

记录Echarts + Vue 踩坑

完成代码如下

效果如下：

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

微信： daxin261

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

参考文章：

地图JSON 资源

vue-echarts绘制地图轮廓相关推荐

最新文章

热门文章

vue-echarts绘制地图轮廓

记录Echarts + Vue 踩坑

完成代码如下

效果如下：

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

微信： daxin261

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

参考文章：

地图JSON 资源

vue-echarts绘制地图轮廓相关推荐

最新文章

热门文章

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