echartsmap山西省市_echarts山西地图资源-CSDN文库

共15个文件

js：14个

html：1个

5星 · 超过95%的资源需积分: 47 117 浏览量 2018-10-24 15:56:29 上传评论 1 收藏 384KB ZIP 举报

ECharts 是一个基于 JavaScript 的数据可视化库，广泛用于创建交互式的图表、地图等。在“echarts map 山西省市”这个项目中，你获得了一个完整的代码包，专门用于展示山西省的地图及其下属各个城市的分布。这个包包含了针对山西省的定制化 ECharts 地图组件，使得你可以轻松地在网页中展示山西省的地理信息。 ECharts 的地图功能强大，它支持自定义地图，包括省份、城市甚至更细致的区域划分。在描述中提到的“山西省js文件”很可能是 ECharts 针对山西省的地理坐标和边界信息的配置文件，这个文件包含了山西省地图的基本形状和位置信息。而“山西各市js文件”则是每个城市的具体地图数据，可能包括太原市、大同市、阳泉市、长治市、晋城市、朔州市、晋中市、运城市、忻州市、临汾市、吕梁市等所有地级市的地图信息。使用这些文件，开发者可以轻松地在 ECharts 中加载山西省地图，并进一步展示各市的数据。例如，你可以通过改变各个区域的颜色或大小来反映不同城市的经济指标、人口数据或者其它统计信息。ECharts 提供了丰富的交互功能，用户可以通过鼠标悬停、点击等操作获取更详细的信息。在实现过程中，首先需要引入 ECharts 库和对应的地图文件。然后，你需要创建一个 ECharts 实例，配置地图类型为“map”，并指定地图的名称（如 "china" 或 "shanxi"）。接着，你可以设置地图的特殊样式，比如颜色、高亮效果等。将地图文件加载到实例中，就可以在网页上显示山西省地图了。对于每个市，你可能还需要提供特定的数据，如 JSON 格式的统计数据，这些数据会与地图上的各个区域关联，用于动态渲染。ECharts 提供的 `series` 配置项可以用来绑定数据，`label` 和 `itemStyle` 配置项则用于控制各区域的文本显示和样式。此外，ECharts 还支持地图的缩放、平移、鼠标滚轮操作，以及自定义图例、工具提示等功能，可以根据需求进行配置。如果需要更复杂的交互，比如点击事件处理，可以通过监听 ECharts 的各种事件（如 'click'）来实现。总结一下，ECharts 的地图功能允许开发者以直观且交互的方式展示地理数据。在“echarts map 山西省市”这个项目中，你将拥有展示山西省及其城市详细信息的所有必要资源。通过学习和运用这些文件，你可以创建出能够生动展现山西省各地情况的可视化应用。无论是学术研究、政府报告还是商业分析，这都是一个非常实用的工具。

资源推荐

资源详情

资源评论

收起资源包目录

echarts-map.zip （15个子文件）

echarts-map

index.html 4KB

province

jinzhong.js 12KB

datong.js 19KB

taiyuan.js 15KB

linfen.js 14KB

shuozhou.js 9KB

yuncheng.js 20KB

xinzhou.js 17KB

yangquan.js 6KB

shanxi.js 23KB

jincheng.js 9KB

changzhi.js 12KB

lvliang.js 17KB

echarts.min.js 632KB

jquery.js 293KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>     <script src="js/province/shanxi.js" type="text/javascript" charset="utf-8"></script>  <title>山西地图</title> </head> <body> <div id="main" style="width: 1200px;height:900px;"></div> </body> <script type="text/javascript"> //container 为div的id var dom = document.getElementById("main"); //得到echarts的实例对象 var myChart = echarts.init(dom); initEcharts('山西'); function initEcharts(pName) { //关键是配置项 var option = { series: [{ name: '网点个数', //series[i]-map:系列列表。每个系列通过 type 决定自己的图表类型,此处是地图类型 type: 'map', //这里是'china',及因为js中注册的名字，如果是上海市，则该出需pName 指的是'shanghai' mapType: pName, //地图区域的多边形图形样式，有 normal 和 emphasis 两个状态 itemStyle: { //normal 是图形在默认状态下的样式； normal: { show: true, areaColor: "#CECECE", borderColor: "#FCFCFC", borderWidth: "1" }, //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 emphasis: { show: true, areaColor: "#C8A5DF", } }, //图形上的文本标签，可用于说明图形的一些数据信息 label: { normal: { show: true }, emphasis: { show: true } }, }], title: { text: pName, left: 'center' } }; //使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //定义全国省份的数组 var provinces = ['datong', 'shuozhou', 'xinzhou', 'lvliang', 'taiyuan', 'yangquan', 'jinzhong', 'linfen', 'changzhi', 'jincheng', 'yuncheng']; var provincesText = ['大同市', '朔州市', '忻州市', '吕梁市', '太原市', '阳泉市', '晋中市', '临汾市', '长治市', '晋城市', '运城市' ]; myChart.on('click', function(param) { console.log(param); //遍历取到provincesText 中的下标去拿到对应的省js for (var i = 0; i < provincesText.length; i++) { if (param.name == provincesText[i]) { //显示对应省份的方法 showProvince(provincesText[i],provinces[i]); break; } } }); //展示对应的省 function showProvince(pText,pName) { //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。 loadBdScript('$' + pName + 'JS', 'js/province/' + pName + '.js', function() { //初始化echarts:具体代码参考上面初始化中国地图即可，这里不再重复。 initEcharts(pText); }); } //加载对应的JS function loadBdScript(scriptId, url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { //IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function() { callback(); }; } script.src = url; script.id = scriptId; document.getElementsByTagName("head")[0].appendChild(script); }; </script> </html>

评论收藏

内容反馈