效果图：

一、首先第一步需要下载echarts和获取到陕西身份的地图信息。

1.下载echarts链接（官网）：

Apache ECharts

2.生成指定省份的地图数据信息，数据可以在阿里云获取。

DataV.GeoAtlas地理小工具系列

如图，点击左圈需要的省份，这里我选择的是陕西省，然后点击右圈复制下载链接，得到一个json格式的数据，可以在json转换网站转成js格式。

Json在线解析格式化-Json在线校验Json格式化压缩-Jsons在线工具

转成js格式的数据后，将数据赋值给一个变量，并放在一个单独的js文件里。

二、使用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#main{width:400px;height:400px;border:5px solid #ccc;}</style>
</head>
<body><div id="main"></div>
</body>
</html>
<script src="./echarts.js"></script>
<script src="./shanxi.js"></script>
<script type="text/javascript">
var mapChatDate=shanxi;//使用shanxi.js中的变量
echarts.registerMap('shanxi', mapChatDate);
var chart = echarts.init(document.getElementById('main'));
var dataMap = [{ name: '西安市' },{ name: '汉中市' }];
option={visualMap: {min: 170259,max: 401178,text: ['max', 'min'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},
series: [{type: 'map',map: 'shanxi',itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},label: {normal: {textStyle: {fontSize: 16,// fontWeight: 'bold',color: 'black'}}},data: [{ name: '西安市', value: 610100 },{ name: '汉中市', value: 610700 },]
}]
}
chart.setOption(option);
//取消选中的高亮
// chart.dispatchAction({
//     type: 'highlight', // 高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
//     seriesIndex: 0,
//     name: '西安市'
// })
</script>

echarts 生成中国陕西省份（或其他省份）的地图，大屏使用相关推荐

用python，flask，echarts实现豆瓣读书top250的爬取及可视化大屏
好的,我来为你讲解如何使用 Python.Flask 和 Echarts 实现豆瓣读书 Top250 的爬取和可视化大屏. 首先,你需要在你的电脑上安装 Python 和 Flask,并使用 pip ...
关于flask入门教程-ajax+echarts实现大屏展示
陆陆续续写了一个系列的flask入门教程了,最后以一个半成品大屏做个了结,也算是一段时间的成果吧,毕竟不是专业码农,只是爱好而已,还有很多其他的事情等待探索. 大屏用到的技术主要包括标准的HTML.C ...
echarts大屏可视化，HTML+CSS加载全国、或某一省市（安徽省）（各个省市县）地图
echarts加载全国.或某一省市(安徽省)(各个省市县)地图: 全国地图大屏demo实例下载安徽省地图大屏demo实例下载先看一下效果图 1.地图的生成: mapJson.json的生成.访问网 ...
不一样的“中国速度”，数据可视化交通运输大屏，带你见证中国高铁
国家的发展最离不开的就是交通,自从2007年高铁开通以来,中国就进入了高铁时代,"高铁速度"已经成为中国的代名词.在这里小编利用可视化互动平台和大家一起见证中国速度,请看如下数据可 ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图
这是我项目中用到的示例图: 原理:创建两个省份的数组,在点击某个省份的时候,遍历获取对应省份的数据js,并加载此数据js,同时重新初始化echarts渲染此省份的数据效果 1.省份数组,用于遍历获取对 ...
echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...

echarts 生成中国陕西省份（或其他省份）的地图，大屏使用

一、首先第一步需要下载echarts和获取到陕西身份的地图信息。

二、使用。

echarts 生成中国陕西省份（或其他省份）的地图，大屏使用相关推荐

最新文章

热门文章