echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图

echarts加载全国、或某一省市（安徽省）（各个省市县）地图：
全国地图大屏demo实例下载
安徽省地图大屏demo实例下载

先看一下效果图

1.地图的生成：
mapJson.json的生成。访问网址http://datav.aliyun.com/portal/school/atlas/area_selector
根据自己想要加载的范围选择，如安徽省

然后点击右侧的网址复制到浏览器访问

得到地图json，保存为mapJson.json供调用。

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts'));} else {// Browser globalsfactory({}, root.echarts);}
}(this, function (exports, echarts) {var log = function (msg) {if (typeof console !== 'undefined') {console && console.error && console.error(msg);}}if (!echarts) {log('ECharts is not Loaded');return;}if (!echarts.registerMap) {log('ECharts Map is not loaded')return;}echarts.registerMap('anhui', ../common/mapJson.json);
}));

2.地图加载html的地图窗口写好，然后用javascript调用即可：

function map() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('map_1'));
var data = [{name: '安庆市', value: dataValue1[0].安庆市},{name: '亳州市', value: dataValue1[0].亳州市},{name: '蚌埠市', value: dataValue1[0].蚌埠市},{name: '滁州市', value: dataValue1[0].滁州市},{name: '池州市', value: dataValue1[0].池州市},{name: '阜阳市', value: dataValue1[0].阜阳市},{name: '淮南市', value: dataValue1[0].淮南市}, {name: '淮北市', value: dataValue1[0].淮北市},{name: '黄山市', value: dataValue1[0].黄山市},{name: '合肥市', value: dataValue1[0].合肥市},{name: '六安市', value: dataValue1[0].六安市},{name: '马鞍山市', value: dataValue1[0].马鞍山市},{name: '宿州市', value: dataValue1[0].宿州市},{name: '铜陵市', value: dataValue1[0].铜陵市},{name: '芜湖市', value: dataValue1[0].芜湖市},{name: '宣城市', value: dataValue1[0].宣城市}, {name: '砀山县', value: dataValue1[0].砀山县},{name: '广德市', value: dataValue1[0].广德市}
];
var geoCoordMap = {'安庆市':[117.043551,30.50883],'亳州市':[115.782939,33.869338],'蚌埠市':[117.363228,32.939667],'滁州市':[118.316264,32.303627],'池州市':[117.489157,30.656037],'阜阳市':[115.819729,32.896969],'淮南市':[117.018329,32.647574],'淮北市':[116.794664,33.971707],'黄山市':[118.317325,29.709239],'合肥市':[117.283042,31.86119],'六安市':[116.507676,31.752889],'马鞍山市':[118.507906,31.689362],'宿州市':[116.984084,33.633891],'铜陵市':[117.816576,30.929935],'芜湖市':[118.376451,31.326319],'宣城市':[118.757995,30.945667],'砀山县':[116.351113,34.426247],'广德市':[119.417521,30.893116]
};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;
};option = {// backgroundColor: '#404a59',tooltip : {trigger: 'item',formatter: function (params) {if(typeof(params.value)[2] == "undefined"){return params.name + ' : ' + params.value;}else{return params.name + ' : ' + params.value[2];}}},geo: {map: 'anhui',label: {emphasis: {show: true}},roam: false, //放大缩小itemStyle: {normal: {areaColor: '#2E9AFE',borderColor: '#002097'},emphasis: {areaColor: '#293fff'}}},series : [{name: '景数',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 30;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ffeb7b'}}}]
};myChart.setOption(option);window.addEventListener("resize",function(){myChart.resize();});}

上图中的各个地市（省、县）的中心坐标可在json中获取，用来标注圆形数值的位置。
你学会了吗？

echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图相关推荐

ECharts大屏可视化
文章目录 ECharts大屏可视化一.项目概述 1.1 项目介绍 1.2 项目架构 1.3 使用环境二.数据获取 1.获取腾讯数据 1.1数据爬取 1.2数据存储
自定义echarts地图，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图的完美方法
echarts加载全国.或某一省市(安徽省)(各个省市县)地图: 1.全国地图大屏demo实例下载 2.安徽省地图大屏demo实例下载如果想要其他省.市.县地图方法一样,可以参考这篇文章:链接如下: ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...
ECharts大屏可视化【词云，堆积柱状图，折线图，南丁格尔玫瑰图】
一.简介参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 1 <!DOCTYPE html> 2 < ...
Uniapp 大屏展示从后端加载数据显示的胶囊柱图
<template><div class="left-chart-1"><div class="lc1-header">今日 ...
css加载会造成阻塞吗？
终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染 ...
css加载会造成阻塞吗
本文由云+社区发表作者:嘿嘿嘿可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为 ...
js控制css 加载,CSS样式表的加载对于DOM解析,渲染,JS执行的阻塞问题
CSS加载问题 css加载会不会阻塞DOM树的解析? css加载会不会阻塞DOM树的渲染? css加载会不会阻塞后面js语句的执行? css阻塞 h1 { color: red !important ...
VS code实现前后端交互及大屏可视化（Flask+Mysql+Echarts+HTML+JS+CSS）
@阿乐今天敲代码没前言最近老师留了大屏可视化作业,老师讲的模棱两可,在网上又找不到详细的教程,想必好多萌新都跟我一样苦恼,所以在这里记录下,实验工具为VS code.先贴一下我的实验结果图吧,虽然 ...

echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图

echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图相关推荐

最新文章

热门文章