标签：name color value item 结合 var echarts 百度 dataItem
<script language="javascript" type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MaF5RPSfVdWeNqjlmZART93qXVoPiZ2N"></script>
| <div id="main" style="width: 100%;height:100%;"></div> | |
| <script> | |
| //准备好DOM，初始Echarts实例 | |
| var myChart = echarts.init(document.getElementById("main")); | |
| //设置数据 | |
| var geoCoorMap = { | |
| '上海': [121.4648, 31.2891], | |
| '东莞': [113.8953, 22.901], | |
| '东营': [118.7073, 37.5513], | |
| '中山': [113.4229, 22.478], | |
| '临汾': [111.4783, 36.1615], | |
| '临沂': [118.3118, 35.2936], | |
| '丹东': [124.541, 40.4242], | |
| '丽水': [119.5642, 28.1854], | |
| '乌鲁木齐': [87.9236, 43.5883], | |
| '佛山': [112.8955, 23.1097], | |
| '保定': [115.0488, 39.0948], | |
| '兰州': [103.5901, 36.3043], | |
| '包头': [110.3467, 41.4899], | |
| '北京': [116.4551, 40.2539], | |
| '北海': [109.314, 21.6211], | |
| '南京': [118.8062, 31.9208], | |
| '南宁': [108.479, 23.1152], | |
| '南昌': [116.0046, 28.6633], | |
| '南通': [121.1023, 32.1625], | |
| '厦门': [118.1689, 24.6478], | |
| '台州': [121.1353, 28.6688], | |
| '合肥': [117.29, 32.0581], | |
| '呼和浩特': [111.4124, 40.4901], | |
| '咸阳': [108.4131, 34.8706], | |
| '哈尔滨': [127.9688, 45.368], | |
| '唐山': [118.4766, 39.6826], | |
| '嘉兴': [120.9155, 30.6354], | |
| '大同': [113.7854, 39.8035], | |
| '大连': [122.2229, 39.4409], | |
| '天津': [117.4219, 39.4189], | |
| '太原': [112.3352, 37.9413], | |
| '威海': [121.9482, 37.1393], | |
| '宁波': [121.5967, 29.6466], | |
| '宝鸡': [107.1826, 34.3433], | |
| '宿迁': [118.5535, 33.7775], | |
| '常州': [119.4543, 31.5582], | |
| '广州': [113.5107, 23.2196], | |
| '廊坊': [116.521, 39.0509], | |
| '延安': [109.1052, 36.4252], | |
| '张家口': [115.1477, 40.8527], | |
| '徐州': [117.5208, 34.3268], | |
| '德州': [116.6858, 37.2107], | |
| '惠州': [114.6204, 23.1647], | |
| '成都': [103.9526, 30.7617], | |
| '扬州': [119.4653, 32.8162], | |
| '承德': [117.5757, 41.4075], | |
| '拉萨': [91.1865, 30.1465], | |
| '无锡': [120.3442, 31.5527], | |
| '日照': [119.2786, 35.5023], | |
| '昆明': [102.9199, 25.4663], | |
| '杭州': [119.5313, 29.8773], | |
| '枣庄': [117.323, 34.8926], | |
| '柳州': [109.3799, 24.9774], | |
| '株洲': [113.5327, 27.0319], | |
| '武汉': [114.3896, 30.6628], | |
| '汕头': [117.1692, 23.3405], | |
| '江门': [112.6318, 22.1484], | |
| '沈阳': [123.1238, 42.1216], | |
| '沧州': [116.8286, 38.2104], | |
| '河源': [114.917, 23.9722], | |
| '泉州': [118.3228, 25.1147], | |
| '泰安': [117.0264, 36.0516], | |
| '泰州': [120.0586, 32.5525], | |
| '济南': [117.1582, 36.8701], | |
| '济宁': [116.8286, 35.3375], | |
| '海口': [110.3893, 19.8516], | |
| '淄博': [118.0371, 36.6064], | |
| '淮安': [118.927, 33.4039], | |
| '深圳': [114.5435, 22.5439], | |
| '清远': [112.9175, 24.3292], | |
| '温州': [120.498, 27.8119], | |
| '渭南': [109.7864, 35.0299], | |
| '湖州': [119.8608, 30.7782], | |
| '湘潭': [112.5439, 27.7075], | |
| '滨州': [117.8174, 37.4963], | |
| '潍坊': [119.0918, 36.524], | |
| '烟台': [120.7397, 37.5128], | |
| '玉溪': [101.9312, 23.8898], | |
| '珠海': [113.7305, 22.1155], | |
| '盐城': [120.2234, 33.5577], | |
| '盘锦': [121.9482, 41.0449], | |
| '石家庄': [114.4995, 38.1006], | |
| '福州': [119.4543, 25.9222], | |
| '秦皇岛': [119.2126, 40.0232], | |
| '绍兴': [120.564, 29.7565], | |
| '聊城': [115.9167, 36.4032], | |
| '肇庆': [112.1265, 23.5822], | |
| '舟山': [122.2559, 30.2234], | |
| '苏州': [120.6519, 31.3989], | |
| '莱芜': [117.6526, 36.2714], | |
| '菏泽': [115.6201, 35.2057], | |
| '营口': [122.4316, 40.4297], | |
| '葫芦岛': [120.1575, 40.578], | |
| '衡水': [115.8838, 37.7161], | |
| '衢州': [118.6853, 28.8666], | |
| '西宁': [101.4038, 36.8207], | |
| '西安': [109.1162, 34.2004], | |
| '贵阳': [106.6992, 26.7682], | |
| '连云港': [119.1248, 34.552], | |
| '邢台': [114.8071, 37.2821], | |
| '邯郸': [114.4775, 36.535], | |
| '郑州': [113.4668, 34.6234], | |
| '鄂尔多斯': [108.9734, 39.2487], | |
| '重庆': [107.7539, 30.1904], | |
| '金华': [120.0037, 29.1028], | |
| '铜川': [109.0393, 35.1947], | |
| '银川': [106.3586, 38.1775], | |
| '镇江': [119.4763, 31.9702], | |
| '长春': [125.8154, 44.2584], | |
| '长沙': [113.0823, 28.2568], | |
| '长治': [112.8625, 36.4746], | |
| '阳泉': [113.4778, 38.0951], | |
| '青岛': [120.4651, 36.3373], | |
| '韶关': [113.7964, 24.7028] | |
| }; | |
| //北京迁移的地方 | |
| var BjData = [ | |
| [{ | |
| name:'北京' | |
| },{ | |
| name:'上海', | |
| value:95 | |
| }], | |
| [{ | |
| name:'北京', | |
| },{ | |
| name:'广州', | |
| value:90 | |
| }] | |
| ]; | |
| var ShData = [ | |
| [{ | |
| name:'上海' | |
| },{ | |
| name:'包头', | |
| value:95 | |
| }], | |
| [{ | |
| name:'上海' | |
| },{ | |
| name:'昆明', | |
| value:90 | |
| }] | |
| ]; | |
| var GzData = [ | |
| [{ | |
| name:'广州' | |
| },{ | |
| name:'福州', | |
| value:95 | |
| }], | |
| [{ | |
| name:'广州' | |
| },{ | |
| name:'太原', | |
| value:90 | |
| }] | |
| ]; | |
| //飞机的样式 | |
| var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; | |
| //通过传入相关的数据，来返回城市之间的数据（如坐标） | |
| var convertData = function (data) { | |
| var res = []; | |
| for(var i=0;i<data.length;i++){ | |
| var dataItem = data[i]; | |
| //通过父类城市名字获得坐标 | |
| var fromCoord = geoCoorMap[dataItem[0].name]; | |
| //通过子类城市名字获取坐标 | |
| var toCoord = geoCoorMap[dataItem[1].name]; | |
| //两个都不为空，则将两个城市的名字和坐标封装，添加至res数组中 | |
| if(fromCoord && toCoord){ | |
| res.push([{ | |
| name:dataItem[0].name, | |
| coord:fromCoord | |
| },{ | |
| name:dataItem[1].name, | |
| coord:toCoord | |
| }]) | |
| } | |
| } | |
| return res; | |
| } | |
| //每个线路的颜色不同 | |
| var color = ['#a6c84c', '#ffa022', '#46bee9']; | |
| //在地图上显示的数据 | |
| var series = []; | |
| //遍历三个数组 | |
| [ | |
| ['北京',BjData], | |
| ['上海',ShData], | |
| ['广州',GzData] | |
| ].forEach(function (item,i) { | |
| series.push( | |
| { | |
| //名字 | |
| name:item[0], | |
| //类型 | |
| type:'lines', | |
| //设置显示的地图 | |
| coordinateSystem:'bmap', | |
| //堆叠等级 | |
| zlevel:1, | |
| //设置痕迹 | |
| effect:{ | |
| //是否显示 | |
| show:true, | |
| //周期，速度 | |
| period:6, | |
| //痕迹长度 | |
| trailLength:0.7, | |
| //颜色 | |
| color:'#fff', | |
| //痕迹大小 | |
| symbolSize:3 | |
| }, | |
| lineStyle:{ | |
| normal:{ | |
| //设置颜色 | |
| color:color[i], | |
| //宽度，设置为0为了突出飞机 | |
| width:0, | |
| //弯曲的弧度 | |
| curveness:0.1 | |
| } | |
| }, | |
| //线条所对应的数据 | |
| data:convertData(item[1]) | |
| }, | |
| //飞机的样式 其实跟轨迹差不多，就是改变了样式而已 | |
| { | |
| name:item[0], | |
| //线型 | |
| type:'lines', | |
| //设置显示的地图 | |
| coordinateSystem:'bmap', | |
| //堆叠等级 | |
| zlevel:2, | |
| //痕迹-----样式 | |
| effect:{ | |
| //是否显示 | |
| show:true, | |
| //周期、速度 | |
| period:6, | |
| //痕迹长度 | |
| trailLength:0, | |
| //痕迹的样式 ---- 这里是飞机 | |
| symbol:planePath, | |
| //痕迹大小 | |
| symbolSize:15, | |
| //颜色 | |
| color:'#f0f' | |
| }, | |
| //线样式 | |
| lineStyle:{ | |
| normal:{ | |
| //颜色 | |
| color:color[i], | |
| //宽度 0-指不显示 | |
| width:0, | |
| //透明度 | |
| opacity:1, | |
| //弯曲的弧度 | |
| curveness:0.1 | |
| } | |
| }, | |
| data:convertData(item[1]) | |
| }, | |
| { | |
| //城市名字 | |
| name:item[0], | |
| //类型--effectScatter--点、发散的 | |
| type:'effectScatter', | |
| //设置显示的地图 | |
| coordinateSystem:'bmap', | |
| //堆叠等级 | |
| zlevel:2, | |
| //涟漪特效 | |
| rippleEffect:{ | |
| //stroke、fill | |
| brushType:'stroke', | |
| }, | |
| //文本标签 | |
| label:{ | |
| //normal：标准的 italic：斜体字 oblique：倾斜 | |
| normal:{ | |
| //是否显示 | |
| show:true, | |
| //绝对位置 | |
| position:'right', | |
| //用来格式化图例文本 | |
| formatter:'{b}' | |
| } | |
| }, | |
| //轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。 | |
| symbolSize:function (val) { | |
| return val[2] / 8; | |
| }, | |
| //地图区域的多边形 图形样式。 | |
| itemStyle:{ | |
| normal:{ | |
| color:color[i] | |
| } | |
| }, | |
| data:item[1].map(function (dataItem) { | |
| return{ | |
| name:dataItem[1].name, | |
| value:geoCoorMap[dataItem[1].name].concat([dataItem[1].value]) | |
| }; | |
| }) | |
| } | |
| ); | |
| }); | |
| option = { | |
| title:{ | |
| text:'模拟迁移', | |
| subtext:'数据纯属真实', | |
| left:'center', | |
| textStyle:{ | |
| color:'#fff' | |
| } | |
| }, | |
| tooltip:{ | |
| //触发类型 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 | |
| trigger:'item' | |
| }, | |
| //图例组件 | |
| legend:{ | |
| //图例列表的布局朝向。vertical 垂直方向 | |
| orient:'vertical', | |
| // | |
| top:'bottom', | |
| left:'right', | |
| data:['北京','上海','广州'], | |
| textStyle:{ | |
| //字体颜色 | |
| color:'#fff' | |
| }, | |
| }, | |
| //地图配置 | |
| bmap:{ | |
| //设置地图中心点 | |
| center: [120.13066322374, 30.240018034923], | |
| //地图缩放级别 | |
| zoom:7, | |
| //是否允许拖拽 | |
| roam:true, | |
| }, | |
| series:series, | |
| }; | |
| //添加配置项和数据 | |
| myChart.setOption(option); | |
| //获取百度地图实例 | |
| var map = myChart.getModel().getComponent('bmap').getBMap();</script> | |
| </div> |
标签：name,color,value,item,结合,var,echarts,百度,dataItem 来源： https://blog.csdn.net/yelin042/article/details/89362356
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。