vue echarts 地图

本文以echarts官方文档的例子来介绍vue中使用echarts地图
echarts官方文档
https://www.echartsjs.com/zh/index.html

1.安装echarts插件
运行命令安装插件

npm install echarts --save

2.新建vue文件，引入echars组件及城市地图

import echarts from 'echarts'
import BJ from 'echarts/map/json/province/beijing.json' //echarts map json文件

3.vue文件

<template><div id="mapContainer" style="width:100%; height:100%"></div>
</template>
<script>import echarts from 'echarts'import BJ from 'echarts/map/json/province/beijing.json'export default {name:'mapContainer',data() {return {chart: null}},mounted() {this.initCharts()},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods:{initCharts() {let charMap = document.getElementById('mapContainer')// 注册可用的地图  echarts.registerMap('beijing', BJ);this.chart = echarts.init(charMap)this.setOption()},setOption() {const option = {title: {text: '北京区域人口密度 （2011）'},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 800,max: 50000,text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue','yellow', 'orangered']}},series: [{name: '北京人口密度',type: 'map',roam:true, //鼠标滚动缩放mapType: 'beijing', //  echarts.registerMap('beijing', BJ); 与这部分对应itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '东城区', value: 20057.34},{name: '西城区', value: 15477.48},{name: '朝阳区', value: 31686.1},{name: '丰台区', value: 6992.6},{name: '石景山区', value: 44045.49},{name: '海淀区', value: 40689.64},{name: '门头沟区', value: 37659.78},{name: '房山区', value: 45180.97},{name: '通州区', value: 55204.26},{name: '顺义区', value: 21900.9},{name: '昌平区', value: 4918.26},{name: '大兴区', value: 5881.84},{name: '怀柔区', value: 4178.01},{name: '平谷区', value: 2227.92},{name: '密云区', value: 2180.98},{name: '延庆区', value: 9172.94}]}]}this.chart.setOption(option)}}}
</script>

vue echarts 地图相关推荐

vue+echarts地图 + 杭州市 + 点击穿透下面的区和县
vue+echarts地图 + 杭州市 + 点击穿透下面的区和县根据echarts Api 安装教程进行安装 npm install echarts --save 有需要的可以安装固定版本 npm ...
Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
echart在开发地图时,会遇到下钻显示子区域地图数据.比如四川省,下钻到市级成都市,再下钻到区级.下载地址:DataV.GeoAtlas地理小工具系列 1.首先需要下载对应的地图,如果是联网的可以直 ...
vue echarts地图省市区下钻详解
哈喽你们好!我是小邱,应该会有很多朋友和我都是全栈,我希望今天发表的文章对大家能够有所帮助. 今天我又要说下我不太熟练地vue技术了虽然不熟练啊但是思路清晰哈哈上码如果你觉得我文章还不错就点个关注 ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
vue echarts 地图立体并设置tooltip属性背景图片
这是做完的样子 1.地图立体的代码,map应与series中的一致 //地图立体的代码,map应与series中的一致 geo: {map: '34',aspectScale: 1, //长宽比zoo ...
vue+echarts 地图携带参数下钻【demo二】
相关必要文件已上传个人GIT代码库,自行下载 https://gitee.com/lemon-design/EchartsMapDeepDown.git 下钻数据为假数据中国–>辽宁–> ...
vue+echarts 地图携带参数下钻【demo一】
相关必要文件已上传个人GIT代码库,自行下载 https://gitee.com/lemon-design/EchartsMap.git 个人鼓捣了快一周了本文地图下钻部分通过watch监控返回数据 ...
vue echarts 地图外边框阴影
这里部分写的假数据,根据需求修改 data() {return {myEcharts: null,scatterData: [{name: '广州市',value: [113.280637,23.12 ...

vue echarts 地图

vue echarts 地图相关推荐

最新文章

热门文章