Vue+Excharts画出重庆地图

一、引入Excharts

全国地图选择器API

http://datav.aliyun.com/tools/atlas/#&lat=30.199123662463407&lng=107.74161937967794&zoom=7.5

重庆市样例

JSON下载链接

<template><div class="map_content"><div ref="area_json" class="map_body" /></div>
</template><script>
const echart = require('echarts')
var opt = require('@/assets/geoJson/cqArea.json') // 引入chongqing.json地图文件
// var opt = require('@/assets/geoJson/areaJson.json') // 引入chongqing.json地图文件
export default {data() {return {MapData: [{ name: '合川区', value: -1, selected: false },{ name: '江北区', value: -1, selected: false },{ name: '綦江区', value: -1, selected: false },{ name: '云阳县', value: -1, selected: false },{ name: '酉阳县', value: -1, selected: false },{ name: '渝北区', value: -1, selected: false },{ name: '彭水县', value: -1, selected: false },{ name: '铜梁区', value: -1, selected: false },{ name: '南川区', value: -2, selected: false },{ name: '璧山区', value: -2, selected: false },{ name: '垫江县', value: -2, selected: false },{ name: '大渡口区', value: -1, selected: false }]}},mounted() {this.initExcharts()},methods: {initExcharts() {this.myChart = echart.init(this.$refs.area_json)echart.registerMap('重庆', opt)this.myChart.setOption({title: {text: '全市共享状态图',x: 'left',y: 'top',left: 20,textStyle: {fontWeight: 'bold',fontSize: '18'}},tooltip: {show: true,trigger: 'item',backgroundColor: 'rgba(3, 22, 96, 0.5)',formatter: function(params, ticket, callback) {let res = ''if (params.value < -1) {res = '已掉线'} else if (params.value === -1) {res = '未开通'} else if (params.value >= 0) {const notFound = params.data?.notFoundlet text = ''if (notFound.length > 0) {notFound.map((item, index) => {if (index !== notFound.length - 1) {text += `${item}、`} else {text += `${item}`}return text})} else {text = '暂无'}if (params.name !== '主城九区') {res = `<p>${params?.data?.name}：</p><p><span style="margin-right:20px">利用人次：${params?.data?.value}</span><span>档案利用数：${params?.data?.archivesUseNum}</span></p><p>不可访问档案分类：<span style="color:#FFCE2C">${text}</span></p>`}}return res},textStyle: {color: '#fff'}},toolbox: {show: false,orient: 'vertical',left: 'right',top: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},dataRange: [{left: '20px',bottom: '20px',show: false,itemGap: 1,itemWidth: 10,itemHeight: 5,orient: 'vertical', // 'horizontal'color: [], // 颜色splitList: [{ start: 500, color: '#1592E6' },{ start: 100, end: 500, color: '#47AEF3' },{ start: 50, end: 100, color: '#77C9FF' },{ start: 10, end: 50, color: '#98D6FF' },{ start: 0, end: 10, color: '#B8E3FF' },{ start: -1, end: -1, color: '#CCCCCC', label: '未开通' },{ start: -2, end: -2, color: '#FD716F', label: '已掉线' }],textStyle: {// 字体设置fontSize: 12,fontWeight: '500',color: '#444444'}}],series: [{name: '重庆市地图',type: 'map',zoom: 1.2, // 显示比例大小mapType: '重庆', // 自定义扩展图表类型itemStyle: {normal: { label: { show: true }},emphasis: { label: { show: true }}},label: {normal: {show: true, // 是否显示区域labeltextStyle: {fontSize: 14,color: '#333'}}},data: this.MapData,nameMap: {'石柱土家族自治县': '石柱县','秀山土家族苗族自治县': '秀山县','酉阳土家族苗族自治县': '酉阳县','彭水苗族土家族自治县': '彭水县','开县': '开州区'}}]})}}
}
</script><style lang="scss" scoped>.map_content{width: 1200px;height: 1200px;.map_body{z-index: 1;height: 700px;width: 700px}}
</style>

Vue+Excharts画出重庆地图相关推荐

如何用python画出中国地图-用Python画中国地图（二）
在上一篇文章<用Python画一个中国地图>中,我们简单描述了一下如何用Python快速画出一个中国地图的轮廓,似乎没有什么实用价值,这一次我们用实际数据填充它,使它看上去更有意义. 上色 ...
Android开发画出中国地图,Android 绘制中国地图
最近的版本有这样一个需求: 有 3 个要素: 中国地图高亮省区中心显示数字面对这样一个需求,该如何实现呢? 高德地图因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...
如何用python画出中国地图-用Python画一个中国地图
你用 Java 的 4 行代码画一个地图出来?m.drawcountries(linewidth=1.5) 就变成了如许: 用 Java 可能吗?用 PHP 可能吗? 如不雅我们想显示中国地图,只须要 ...
matplotlib+basemap画出标记地图
参考地址:https://mp.weixin.qq.com/s/Mni6ZLGC5jlUzMVpglv6JA https://www.cnblogs.com/ameile/ ...
想画出你家乡地图吗，来来来！
看到各种各样漂亮的地图有没有很羡慕,那么这些地图究竟是怎么画出来的呢,这里主要介绍两个画地图的R包. 一.leafletCN 1.包的下载与安装下载: install.packages('leafl ...
用js画一个中国地图
好的,下面是使用 JavaScript 画出中国地图的方法: 首先,你需要准备一张中国地图的图片.你可以在网上找一张合适的图片,或者使用图形工具(如 Adobe Illustrator)自己制作. 在 ...
Altair 画世界热力地图
在用自己搜集的数据来画热力地图的时候,只需要向数据中添加id字段,就可以效仿官网给出的代码画出热力地图了.这需要知道每个国家或地区的id是什么.https://github.com/alisle/wo ...
用python绘制漂亮的图形-python如何画出漂亮的地图？
Python地图可视化库有大家熟知的pyecharts.plotly.folium,其他回答都有介绍,还有稍低调的bokeh.basemap.geopandas,也是地图可视化的利器. 首先介绍下bo ...
python地图两点距离_没学过还真不会！怎样才能画出准确的地图？
▼ -文字稿- 怎样画一张地图? 用纸笔勾勒出道路大概的方向.周围建筑物的轮廓,写上路名.这样就得到了一张简单的地图,但是你照着它可能连自己家都找不到. 因为你的地图不能准确地描述道路的长度.方位等信 ...

Vue+Excharts画出重庆地图

一、引入Excharts

全国地图选择器API

重庆市样例

Vue+Excharts画出重庆地图相关推荐

最新文章

热门文章