echart渲染深圳地图

上图：

上代码：

<template><div class="dashboard-container"><div class="dashboard-text">name: {{ name }}</div><div class="map-c"><div class="map-title">echarts深圳市地图</div><el-select v-model="areaCode" size="mini" class="map-selector" placeholder="深圳市" @change="changeAreaCode"><el-option v-for="item in areaCodList" :key="item.code" :label="item.name" :value="item.code" /></el-select><div id="szMap" /></div></div>
</template><script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import szMapData from './szMapData/440300.js'
import dapengMapData from './szMapData/440301.json'
import luohuMapData from './szMapData/440303.json'
import futianMapData from './szMapData/440304.json'
import nanshanMapData from './szMapData/440305.json'
import baoanMapData from './szMapData/440306.json'
import longgangMapData from './szMapData/440307.json'
import yantianMapData from './szMapData/440308.json'
import longhuaMapData from './szMapData/440309.json'
import pingshanMapData from './szMapData/440310.json'
import guangmingMapData from './szMapData/440311.json'
import shenshanMapData from './szMapData/440312.json'
import lightLoop from '@/assets/images/lightLoop.png'export default {name: 'Dashboard',data: function() {const getData = function(id) {const data = {1: { count: 100 },2: { count: 200 },3: { count: 300 }}return new Promise((resolve, reject) => {setTimeout(() => {resolve(data[id] || [])}, 300)})}return {areaCode: 440300,areaCodList: [ // 深圳各区code{ code: 440300, name: '深圳市' },{ code: 440301, name: '大鹏新区' },{ code: 440303, name: '罗湖区' },{ code: 440304, name: '福田区' },{ code: 440305, name: '南山区' },{ code: 440306, name: '宝安区' },{ code: 440307, name: '龙岗区' },{ code: 440308, name: '盐田区' },{ code: 440309, name: '龙华区' },{ code: 440310, name: '坪山区' },{ code: 440311, name: '光明区' },{ code: 440312, name: '深汕合作区' }],szMapEChart: null, // 深圳地图szMapOption: { // 地图配置tooltip: {show: true,trigger: 'item',triggerOn: 'click',formatter: function(params, ticket, callback) {getData(params.data.id).then(cData => {callback(ticket, `<div class="map-item-detail"><div class="title">${params.data.name || ''}</div><div class="text">人数：<span class="val">${cData.count || ''}</span></div></div>`)})return 'loading...'}},series: [],geo: {map: 'city',layoutCenter: ['50%', '50%'], // 设置后left/right/top/bottom等属性无效layoutSize: '90%',roam: true, // 开启鼠标缩放和漫aspectScale: 1, // 长宽比zoom: 2,label: {normal: { // 静态的时候展示样式show: true, // 是否显示地图省份得名称textStyle: {color: '#fff',fontFamily: 'Arial'}},emphasis: { // 动态展示的样式color: '#fff'}},itemStyle: {normal: {borderColor: '#fff',areaColor: '#2D85E1',textStyle: {color: '#fff'}},emphasis: {areaColor: '#1c2f59',color: '#fff'}}}}}},computed: {...mapGetters(['name'])},mounted() {this.renderSzMap()},created() {echarts.registerMap('city', szMapData)},methods: {// 渲染深圳地图renderSzMap() {this.szMapOption.series = this.getSzMapSeries()this.szMapEChart = echarts.init(document.getElementById('szMap'))this.szMapEChart.setOption(this.szMapOption)window.onresize = function() {this.szMapEChart && this.szMapEChart.resize()}},// 地图落点getSzMapSeries() {const seriesList = [{name: 's1',data: [{ id: 1, name: 'test1', areaCode: 440304, value: [114.05096, 22.541009] },{ id: 2, name: 'test2', areaCode: 440303, value: [114.13166, 22.54836] },{ id: 3, name: 'test3', areaCode: 440307, value: [114.24779, 22.71991] }]}]return seriesList.map(sData => {return {type: 'scatter',roam: false,zoom: 1,name: sData.name,coordinateSystem: 'geo',data: this.areaCode === 440300 ? sData.data : sData.data.filter(item => this.areaCode === item.areaCode),symbol: (params) => ('image://' + lightLoop), // 图标z: 2,symbolSize: [20, 20] // symbols图标大小}})},// 切换区域changeAreaCode() {const areaCodeMapDataKeyBy = {440300: szMapData,440301: dapengMapData,440303: luohuMapData,440304: futianMapData,440305: nanshanMapData,440306: baoanMapData,440307: longgangMapData,440308: yantianMapData,440309: longhuaMapData,440310: pingshanMapData,440311: guangmingMapData,440312: shenshanMapData}echarts.registerMap('city', areaCodeMapDataKeyBy[this.areaCode] || szMapData)this.szMapOption.geo.zoom = areaCodeMapDataKeyBy[this.areaCode] && this.areaCode === 440300 ? 1.8 : 1.2this.szMapOption.series = this.getSzMapSeries()this.szMapEChart.setOption(this.szMapOption, true)}}
}
</script><style lang="scss" scoped>
.dashboard {&-container {margin: 30px;}&-text {font-size: 30px;line-height: 46px;}
}
</style><style lang="scss">
.map-c {position: relative;background-color: #EFF9F8;.map-title {text-align: center;padding: 20px;font-size: 22px;font-weight: 500;}.map-selector {position: absolute;z-index: 99;top: 30px;right: 20px;width: 120px;.el-input {width: 120px !important;input {height: 22px;line-height: 22px;}}}#szMap {width: 100%;height: 750px;.map-item-detail {.title {font-size: 16px;color: #333333;font-weight: 500;margin-bottom: 10px;}.text {font-size: 14px;color: #999;margin-bottom: 5px;}.val {font-size: 14px;color: #333;}}}
}
</style>

git: https://github.com/Promise-W/vue-admin-template (请切换分支到feature-vue-node)

echart渲染深圳地图相关推荐

Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
Echart实现中国地图和地图打点
一.概述首先ECharts 是一个使用 JavaScript 实现的开源可视化库.兼容当前绝大部分浏览器,而且提供大量可交互.可高度个性化定制的图表,满足开发者各种需求. 今天主要展示echarts ...
EChart中使用地图方式总结（转载）
EChart中使用地图方式总结 2018年02月06日 22:18:57 来源:https://blog.csdn.net/shaxiaozilove/article/details/79274772 ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
echart结合高德地图的数据可视化大数据展示平台模板
该模板首先展示echart的中国地图,点击中国地图的各个省会进入到相应的市,点击市进入区,点击区展示高德地图的改区域的地图. 该模板完全结合了echart和高德地图的接口,适用于大数据展示类,很有学习 ...
echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...
OpenStreetMap初探（七）——渲染和地图瓦片之安装Mapnik
主要的渲染和瓦片工具有这么几个: 渲染和地图瓦片: Mapnik 见mapnik.org [1] Osmarender (XSLT) svn trac Tiles@home distributed ...
使用Echart搭配百度地图创建某一地区热点图的注意点
使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程. 效果图: 代码: <!DOCTYPE html> <html style=&quo ...
vue+eChart实现省份地图
vue+eChart实现省份地图 import echarts from "echarts"; require("echarts/theme/macarons" ...
vue中使用echart创建上海地图
效果图! 前提:是在vue的项目中用到的全部代码(用到的东西在代码里面有写了) 地图文件的来源 1.本地安装echart插件,可以在(node_modules/echarts/map/json/pr ...

echart渲染深圳地图

echart渲染深圳地图相关推荐

最新文章

热门文章