echarts3 实现中国地图

echarts3 实现中国地图
china.js下载地址（及各省市） https://download.csdn.net/download/super__code/10676410

效果图
直接贴代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--引入  echarts--><script src="assets/plugins/echarts3/echarts3.min.js"></script><!--引入 china.js  echarts3不在支持内置地图文件，需要另外引入--><script src="assets/plugins/echarts3/js/china.js"></script></head>
<body>
<div id="chinaMap" style="width: 500px;height: 500px;"></div>
</body><script>/*** 基于准备好的dom，初始化echarts实例* */var myChart = echarts.init(document.getElementById("chinaMap"));/***  指定图表的配置项和数据* */var option= {backgroundColor: '#ccc',  //设置背景颜色title: {show:true,text: '中国地图',subtext: '',x:'center'},tooltip : {trigger: 'item'},//左侧小导航图标visualMap: {show : true,x: 'left',y: 'bottom',splitList: [{start: 10, end:20},{start: 6, end: 10},{start: 0, end: 6},],color: ['#a5ad00', '#8bdd00', '#2cd493']},//配置属性series: [{name: '数量',type: 'map',mapType: 'china',roam: false,zoom:1.2,label: {normal: {show: true ,},emphasis: {show: false}},data:[{name: '北京',value:randomData() },{name: '天津',value: randomData() },{name: '上海',value: randomData() },{name: '重庆',value: randomData() },{name: '河北',value: randomData() },{name: '河南',value: randomData() },{name: '云南',value: randomData() },{name: '辽宁',value: randomData() },{name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },{name: '安徽',value: randomData() },{name: '山东',value: randomData() },{name: '新疆',value: randomData() },{name: '江苏',value: randomData() },{name: '浙江',value: randomData() },{name: '江西',value: randomData() },{name: '湖北',value: randomData() },{name: '广西',value: randomData() },{name: '甘肃',value: randomData() },{name: '山西',value: randomData() },{name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },{name: '吉林',value: randomData() },{name: '福建',value: randomData() },{name: '贵州',value: randomData() },{name: '广东',value: randomData() },{name: '青海',value: randomData() },{name: '西藏',value: randomData() },{name: '四川',value: randomData() },{name: '宁夏',value: randomData() },{name: '海南',value: randomData() },{name: '台湾',value: randomData() },{name: '香港',value: randomData() },{name: '澳门',value: randomData() }]}]};/***  使用刚指定的配置项和数据显示图表。*  */myChart.setOption(option);//获取随机数function randomData() {return Math.round(Math.random()*(12-1)+1)}</script>
</html>

echarts3 实现中国地图相关推荐

echarts3中国地图学习理解马克
页面建个div就不用说了,直接放js.注释是我的个人理解,欢迎指正. 注:要导入china.js才能看到效果. /*** 中国地图*/ // 基于准备好的dom,初始化echarts实例 var $v ...
[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
echarts最新版做中国地图（详细版+避雷版）
谨以此篇献给那些在用echarts做中国地图很懊恼的程序媛(员) 真的不想让你们在走弯路节省时间去刷刷抖音他不香吗?? 1.在echarts的官网上根据命令安装 npm install ec ...
如何实现中国地图钻取到各省地图
需求描述: 使用 Echarts 统计图从中国地图,点击某一省份,在新的页面中显示该省份的地图. 实现思路: 在国家地图上添加 onclick 事件,点击国家地图中的省份,生成省份对应的 url, 其 ...
ECHARTS-MAP的使用: 中国地图及省份边界的查看
地图引入方式及demo详解: 官方说明:http://ecomfe.github.io/echarts-map-tool/ ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标 ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
报表中如何实现中国地图钻取到各省地图
需求描述: 使用 Echarts 统计图从中国地图,点击某一省份,在新的页面中显示该省份的地图. 实现思路: 在国家地图上添加 onclick 事件,点击国家地图中的省份,生成省份对应的 url, 其 ...
报表中如何实现中国地图钻取到各省地图？
需求描述: 使用 Echarts 统计图从中国地图,点击某一省份,在新的页面中显示该省份的地图. 实现思路: 在国家地图上添加 onclick 事件,点击国家地图中的省份,生成省份对应的 url, 其 ...
解决echarts5中国地图只显示南海问题，及china.js china.json下载
问题: echarts5中国地图,只显示南海说明: echarts3版本后,因为版权问题,echarts不再内置中国地图,也没有中国地图数据,网上找的又很多有问题,或者语焉不详... 1:需要手动引 ...

echarts3 实现中国地图

echarts3 实现中国地图相关推荐

最新文章

热门文章