百度Echart展示世界地图效果

1、使用百度Echarts展示世界地图效果：

2、实现代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="cjh_world" style="width:1024px;height: 720px;border:1px solid red"></div><script src="js/echarts.min.js"></script><script src="js/world.js"></script><script>var myChart = echarts.init(document.getElementById('cjh_world'));var geoCoordMap = {"北京": [116.407395, 39.904211],"纽约": [-74.005941, 40.712784],"Nicosia": [33.382276, 35.185566],};var rawData = [{"name": "纽约",value: '98%'}, {"name": "北京",value: '30.2%'}, {"name": "Nicosia",value: '30.2%'}];function makeMapData(rawData) {var mapData = [];for (var i = 0; i < rawData.length; i++) {var geoCoord = geoCoordMap[rawData[i].name];if (geoCoord) {mapData.push({name: rawData[i].name,value: geoCoord.concat(rawData[i].value)});}}return mapData;};var option = {backgroundColor: 'white',title: {itemGap: 0,textStyle: {color: '#eee'},z: 200},tooltip: {trigger: 'item',formatter: function(params) {return params.name + "<br/>占" + params.value[2];}},geo: {map: 'world',silent: true,emphasis: {label: {show: true,areaColor: 'red'}},itemStyle: {borderWidth: 0.4,borderColor: '#404a59',areaColor: '#00a4f6'},roam: true,scaleLimit: {min: 1.25,max: 1.25,},zoom: 1.25},series: [{name: 'Prices and Earnings 2012',type: 'scatter',coordinateSystem: 'geo',data: makeMapData(rawData),activeOpacity: 1,label: {formatter: '{b}',position: 'right',show: false},symbolSize: 20,itemStyle: {borderColor: 'red',borderWidth: 6,color: '#fff'},emphasis: {label: {show: false,color: "#000"}}}, {name: '散点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: [120, 60],symbolOffset: [0, -5],label: {normal: {formatter: function(params) {return params.value[2];},show: true,textStyle: {color: '#fff',fontSize: 14,}}},itemStyle: {normal: {color: 'red', //标志颜色}},zlevel: 6,data: makeMapData(rawData)}]};myChart.setOption(option);</script></body>
</html>

百度Echart展示世界地图效果相关推荐

百度广告投放决定排名的因素！在百度推广广告有效果吗？
百度广告的质量度影响着投放价格,质量度越高,最低展示价格就越低,质量度和最高排名出价共同决定着排名,质量度和最高的出价越高,排名就会越排前,质量越高,他的点击价格就会越低,质量越高,推广结果越容易出现 ...
百度地图展示附近1公里范围内的目标
需求从DB中检索附近一公里内的数据,并在百度地图展示: Note: 主要用于从本地数据表中查询符合条件的目标: 效果展示总结 (1) 覆盖物样式设置 // 圆形覆盖物 var circle = n ...
变动翻屏展示图片效果
<HTML><HEAD><TITLE>变动展示图片效果</TITLE> <META http-equiv=Content-Type content ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
grid图片展示 jquery_jquery.gridrotator实现响应式图片展示画廊效果
本教程将教大家制作一个jQuery响应式图片展示画廊效果,所有图片以网格的形式排列,然后定时随机翻转其中某些格子用来切换图片.这种效果可以用来当做背景或装饰放在我们的网站上. jquery.gridr ...
移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo
移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根 ...
html展示ppt模板效果,PPT大神亲测，PPT这样展示图片效果“perfect”!快来收藏吧
终于等到你了,我是爱踢汪.红米手机发布会,抢眼的不仅仅是最新款手机,还有发布会的PPT.发布会PPT图片展示技巧,文字的处理,配色等都堪称一绝.下面我们就来看一看发布会常用的图片展示技巧. PPT大神 ...
mapbox 视角切换 3d与2d之前的切换，加指南针的旋转，模仿百度地图实现的效果
mapbox 视角切换 3d与2d之前的切换,加指南针的旋转,模仿百度地图实现的效果使用方法附件下载地址:mapbox视角切换,模仿baidu地图的3d与2d的切换,与指南针的旋转-Javascr ...
百度竞价推广还有效果吗？
百度竞价推广还有效果吗?这是一个挺庞大的话题,因为它的因素非常多先说一下我的观点,然后针对这个问题从人的角度去分析, 因为我们团队运营的很多账户在不断的变好或者维持稳定,当然有效果不好的. 一.运营的 ...

百度Echart展示世界地图效果

百度Echart展示世界地图效果相关推荐

最新文章

热门文章