Echarts3实例 map地图值渲染

前言

Echarts Map中的地图需要按照区域所绑定的值进行渲染，以展示不同区域的属性值。

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{height: 100%;}*{margin: 0px;height: 0px;}#map{width: 800px;height: 600px;border: 1px solid red;}</style><script src="js/echarts.min.js"></script><script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="map"></div>
<script>var Value = [{name:"莱芜市",value:"100"},{name:"威海市",value:"50"},{name:"滨州市",value:"20"},{name:"临沂市",value:"90"},{name:"淄博市",value:"170"},{name:"日照市",value:"190"},{name:"德州市",value:"160"},{name:"烟台市",value:"140"},{name:"菏泽市",value:"130"},{name:"青岛市",value:"110"},{name:"东营市",value:"105"},{name:"潍坊市",value:"142"},{name:"济南市",value:"80"},{name:"聊城市",value:"184"},{name:"泰安市",value:"55"},{name:"枣庄市",value:"130"},{name:"济宁市",value:"40"}];// JSON$.getJSON('./json/shandong.json', function (data) {echarts.registerMap('shandong', data);var chart = echarts.init(document.getElementById('map'));var option = {title: {text: '值渲染',},tooltip: {trigger: 'item',formatter: function (params) {return params.name + ' : ' + params.value;},extraCssText:"height:20px;"},visualMap: {min: 0,max: 200,calculable: true,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},text:['High','Low'],           // 文本，默认为数值文本},series: [{name: 'USA PopEstimates',type: 'map',roam: true,map: 'shandong',label: {show:true,normal: {show: true,color:"#000",},emphasis: {show: true,fontSize:16,color:"#fff"}},itemStyle:{emphasis:{label:{show:true}}},// 文本位置修正textFixed: {Alaska: [20, -20]},data:Value},]};chart.setOption(option);});</script>
</body>
</html>

Echarts3实例 map地图值渲染相关推荐

Echarts3实例 map地图选中高亮显示
前言 Echarts Map中实现点击区域高亮,点击事件实现实现效果实现代码 <!DOCTYPE html> <html lang="en"> < ...
Echarts3实例 map地图加载点数据
前言 Echarts map地图展示坐标点,并能更具不同的属性值进行区分,展示点数据依赖于Echarts的散点图scatter.effectScatter,底图依赖于geo. geo:地理坐标系组件. ...
ArcEngine C# GIS开发入门作业（三）Ex04——实现地图的简单渲染和唯一值渲染
文章评论写评论 sinat_37432938: 可以说非常有参考的意义,谢谢分享 4周前 #2楼举报回复查看回复(1) domen_dragon 回复 sinat_37432938: 哈哈,谢谢夸 ...
Android Google Map实例 - 在地图和卫星图之间切换(Android mapview)
之前讲述的例子中显示的为地图模式,如何你想使用类似google earth的卫星图模式显示,如何操作? 在android上将变得非常简单: 增加两个Button按钮和两个对应的Button.OnCl ...
建立一个Map实例，k值为String类型，v值为Integer类型。依次用put方法输入如下： map.put(Kobe, 24); map.put(James, 6); map.put(
建立一个Map实例,k值为String类型,v值为Integer类型.依次用put方法输入如下: map.put("Kobe", 24); map.put("James& ...
uniapp使用map地图组件
本人所在的公司最近在做共享电动车的项目,打开该应用看到的就是一副地图,可以获取附近共享电动车的地址.状态等信息,开发这个应用程序还需要在地图上规划路线.动态显示轨迹.轨迹回放等功能.共享开发的项目功能 ...
uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
echarts3 实现中国地图
echarts3 实现中国地图 china.js下载地址(及各省市) https://download.csdn.net/download/super__code/10676410 效果图直接贴代码 ...
scala中map添加值_如何在Scala Map中反转键和值
scala中map添加值 A Map is a data structure that stores data as key: value pair. 映射是一种将数据存储为键:值对的数据结构. Sy ...

Echarts3实例 map地图值渲染

前言

实现效果

实现代码

Echarts3实例 map地图值渲染相关推荐

最新文章

热门文章