echarts地图加载demo_echarts加载中动画资源-CSDN文库

共4个文件

js：3个

html：1个

5星 · 超过95%的资源需积分: 31 47 浏览量 2014-08-12 16:59:55 上传评论 2 收藏 461KB ZIP 举报

在本文中，我们将深入探讨如何使用ECharts库来加载地图，并通过一个名为"echarts地图加载demo"的实例来解析其工作原理。ECharts是一款基于JavaScript的数据可视化库，由百度公司开发，支持丰富的图表类型，包括柱状图、折线图、饼图以及地图等。在地图加载方面，ECharts提供了强大的功能，可以方便地展示地理数据。 1. **ECharts地图加载基础** ECharts加载地图需要依赖于特定的地图JSON文件，这些文件包含了地理信息和坐标系统。地图文件通常分为两类：世界地图和中国区域地图。在ECharts中，你可以通过`map`属性指定地图类型，例如`'world'`或`'china'`。 2. **配置地图** 在ECharts实例中，你需要设置`series`对象，其中包含地图的配置。例如： ```javascript series: [{ type: 'map', mapType: 'china', // 指定地图类型 data: [], // 地图上的数据，用于标记各个地区的值 label: { // 设置地区标签的样式 normal: { show: true, color: 'rgba(0,0,0,0.8)' }, emphasis: { show: true, color: 'rgb(255,255,255)' } }, itemStyle: { // 地区颜色样式 normal: { areaColor: '#313695', borderColor: '#404a59', borderWidth: 0.5 }, emphasis: { areaColor: '#2ec7c9', borderColor: '#b5cea8', borderWidth: 1 } } }] ``` 3. **加载地图JSON数据** ECharts默认提供了一些常见的地图JSON数据，但如果你想自定义地图，或者使用非标准的地图，需要手动引入地图JSON文件。这可以通过`mapUrl`属性实现，如： ```javascript echarts.registerMap('myCustomMap', 'path/to/your/map.json'); ``` 4. **绑定数据** 地图上的数据通常与地区代码关联，如省份、城市ID等。ECharts的`data`数组包含这些代码及其对应的值。例如，对于中国地图，数据可能如下所示： ```javascript data: [ {name: '北京市', value: 10}, {name: '上海市', value: 20}, ... ] ``` `name`字段对应地图区域的名称，`value`字段是该区域的数据值。 5. **交互与动画** ECharts地图支持各种交互操作，如点击高亮、缩放和平移。通过`emphasis`属性，你可以控制鼠标悬停或点击时的地图效果。此外，ECharts还提供了平滑过渡动画，使地图数据变化更加流畅。 6. **MyECharts项目** 在提供的"echarts地图加载demo"中，开发者已经实现了一个基本的地图加载示例。通过查看源代码，我们可以学习如何初始化ECharts实例，设置地图配置，以及加载和显示数据。这是一个很好的学习资源，可以帮助我们更好地理解ECharts地图功能的使用。 ECharts地图加载功能为数据可视化提供了强大的工具，允许我们以直观的方式呈现地理位置相关的数据。通过理解和实践"echarts地图加载demo"，我们可以深入掌握ECharts地图的配置和应用，从而提升数据可视化的能力。

资源推荐

资源详情

资源评论

收起资源包目录

MyECharts.zip （4个子文件）

MyECharts

echarts-map.js 851KB

echarts.js 445KB

esl.js 49KB

demo.html 8KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>demo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script src="js/esl.js" type="text/javascript"></script> </head> <body> <div id="main" style="width:800px;height:600px;"> </div> <script type="text/javascript"> var fileLocation ='js/echarts-map'; require.config({ paths:{ 'echarts': fileLocation } }); // 作为入口 require( [ 'echarts', 'echarts/chart/map' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { title : { text: 'iphone销量', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', x:'left', data:['iphone3','iphone4','iphone5'] }, dataRange: { min: 0, max: 2500, x: 'left', y: 'bottom', text:['高','低'], // 文本，默认为数值文本 calculable : true }, toolbox: { show : true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name: 'iphone3', type: 'map', mapType: 'china', roam: true, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '重庆',value: Math.round(Math.random()*1000)}, {name: '河北',value: Math.round(Math.random()*1000)}, {name: '河南',value: Math.round(Math.random()*1000)}, {name: '云南',value: Math.round(Math.random()*1000)}, {name: '辽宁',value: Math.round(Math.random()*1000)}, {name: '黑龙江',value: Math.round(Math.random()*1000)}, {name: '湖南',value: Math.round(Math.random()*1000)}, {name: '安徽',value: Math.round(Math.random()*1000)}, {name: '山东',value: Math.round(Math.random()*1000)}, {name: '新疆',value: Math.round(Math.random()*1000)}, {name: '江苏',value: Math.round(Math.random()*1000)}, {name: '浙江',value: Math.round(Math.random()*1000)}, {name: '江西',value: Math.round(Math.random()*1000)}, {name: '湖北',value: Math.round(Math.random()*1000)}, {name: '广西',value: Math.round(Math.random()*1000)}, {name: '甘肃',value: Math.round(Math.random()*1000)}, {name: '山西',value: Math.round(Math.random()*1000)}, {name: '内蒙古',value: Math.round(Math.random()*1000)}, {name: '陕西',value: Math.round(Math.random()*1000)}, {name: '吉林',value: Math.round(Math.random()*1000)}, {name: '福建',value: Math.round(Math.random()*1000)}, {name: '贵州',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '青海',value: Math.round(Math.random()*1000)}, {name: '西藏',value: Math.round(Math.random()*1000)}, {name: '四川',value: Math.round(Math.random()*1000)}, {name: '宁夏',value: Math.round(Math.random()*1000)}, {name: '海南',value: Math.round(Math.random()*1000)}, {name: '台湾',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] }, { name: 'iphone4', type: 'map', mapType: 'china', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '重庆',value: Math.round(Math.random()*1000)}, {name: '河北',value: Math.round(Math.random()*1000)}, {name: '安徽',value: Math.round(Math.random()*1000)}, {name: '新疆',value: Math.round(Math.random()*1000)}, {name: '浙江',value: Math.round(Math.random()*1000)}, {name: '江西',value: Math.round(Math.random()*1000)}, {name: '山西',value: Math.round(Math.random()*1000)}, {name: '内蒙古',value: Math.round(Math.random()*1000)}, {name: '吉林',value: Math.round(Math.random()*1000)}, {name: '福建',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '西藏',value: Math.round(Math.random()*1000)}, {name: '四川',value: Math.round(Math.random()*1000)}, {name: '宁夏',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] }, { name: 'iphone5', type: 'map', mapType: 'china', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '台湾',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] } ] }; var ecConfig= require('echarts/config'); myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) { varselected=param.selected; varmapSeries=option.series[0]; vardata= []; varlegendData= []; varname; for (varp=0,len=mapSeries.data.length; p<len; p++) { name=mapSeries.data[p].name; mapSeries.data[p].selected=selected[name]; if (selected[name]) { alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作 } } }); myChart.setOption(option); } ); </script> </body> </html>

评论收藏

内容反馈