echarts制作迁徙图

使用echarts制作迁徙图，以天津市为例，先上图

其中全国各省地图边界经纬度坐标下载地址：http://www.ourd3js.com/wordpress/638/#more-638

代码示例：

// 路径配置require.config({paths: {echarts: 'build/dist'}});// 使用require(['echarts','echarts/chart/map' // 使用柱状图就加载bar模块，按需加载],function (ec) {require('echarts/util/mapData/params').params.tianjin = {getGeoJson: function (callback) {$.getJSON('build/tjfgs.json', function (data) {// 压缩后的地图数据必须使用 decode 函数转换callback(require('echarts/util/mapData/params').decode(data));});}};// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {backgroundColor: '',color: ['gold', 'aqua', 'lime'],tooltip : {trigger: 'item',formatter: '{b}'},legend: {show :false,orient: 'vertical',x: '30',data: ['南开红桥', '和平河西', '河北河东'],selectedMode: 'single',selected: {'和平河西': false,'河北河东': false},textStyle: {color: '#fff'}},dataRange: {show:false,min: 0,max: 100,x: '760',y: '5',orient: 'horizontal',calculable: true,color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],textStyle: {color: '#fff'}},//通用图形配置series: [{name: '南开红桥',type: 'map',hoverable: false,mapType: 'tianjin',roam: false,itemStyle: {normal:{label:{show:true,textStyle:{color:'#07d40d'}},borderColor:'rgba(255,255,255,1)',borderWidth:0.5,areaStyle:{color: '#CCCCFF'}},emphasis:{label:{show:true}}},data: [],//                          数据表现内容markLine: {smooth: true,effect : {show: true,scaleSize: 1,period: 30,color: '#fff',shadowBlur: 10},itemStyle : {normal: {borderWidth:1,lineStyle: {type: 'solid',shadowBlur: 10}}},data: [[{name:'南开红桥'},{name:'宝坻区'}],[{name:'南开红桥'},{name:'北辰区'}],[{name:'南开红桥'},{name:'东丽区'}],[{name:'南开红桥'},{name:'和平河西'}],[{name:'南开红桥'},{name:'河北河东'}],[{name:'南开红桥'},{name:'津南区'}],[{name:'南开红桥'},{name:'武清区'}],],},geoCoord: {'宝坻区': [117.310682,39.730124],'北辰区': [117.139545,39.23218],'东丽区': [117.323722,39.091136],'和平河西': [117.21766,39.116725],'河北河东': [117.236416,39.149329],'津南区': [117.335891,38.946767],'武清区':[117.03002,39.405758],'南开红桥':[117.146565,39.154897],},markPoint: {symbol: 'emptyCircle',//symbolSize:5,effect : {show: true,shadowBlur : 0},itemStyle:{normal:{label:{show:true}},emphasis: {label:{position:'top'}}},data: [{name:'宝坻区',value:95},{name:'北辰区',value:90},{name:'东丽区',value:85},{name:'和平河西',value:75},{name:'河北河东',value:65},{name:'津南区',value:55},{name:'武清区',value:100}]}}]};// 为echarts对象加载数据myChart.setOption(option);});

示例代码下载地址： http://download.csdn.net/download/ardo_pass/10141785

echarts制作迁徙图相关推荐

vue使用e-charts制作专题图（广西省为例）---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇写博客是为了做笔记先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
地图 svg中国地图、echarts百度迁徙图
总结下最近使用过的地图控件: 第一种 svg中国地图 demo:http://www.oschina.net/code/snippet_54124_36979 这个很简单,照着demo里面直接调用就可 ...
echarts模拟迁徙图
index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻
记录最近使用echarts制作地图的过程及部分代码: 其中在网络上借鉴了不少优秀的源码,在此感谢他们的开源精神. 先看效果: (一)态势图.热点图.轨迹图及全屏功能全屏效果: (二)改普通地图为百度 ...
Cesium+Echarts：迁徙图
效果如下, 示例代码如下, <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
Echarts中迁徙图，设置点和航线的不同颜色
根据不同的元素,为点和线设置不同的颜色 let minigrateChart = echarts.init(document.getElementById("MinigrateChart&q ...
Unity 贝塞尔曲线制作迁徙图
效果图: 实现该效果图所需的知识点: 1.贝塞尔曲线贝塞尔曲线是图形学中非常重要的参数曲线,在此不做详细介绍,这里我们用到的是二次方公式: using UnityEngine; using Syst ...
echarts 生成迁徙图_echarts3 迁徙图迁入迁出(示例代码)
geoCoordMap ={'上海': [121.4648,31.2891],'佛山': [112.8955,23.1097],'保定': [115.0488,39.0948],'兰州': [103. ...
echarts地图迁徙图--根据数据设置线的颜色
直接贴代码了 var geoCoordMap = { //可以在地图上显示的城市的坐标信息 '石家庄': [114.52,38.05], '长春': [125.8154, 44.2584], '长沙' ...

echarts制作迁徙图

echarts制作迁徙图相关推荐

最新文章

热门文章