使用EChats制作中国地图，点击省份跳转到相应链接

html中：

js文件

其中map.js

var container = document.getElementById('main');
//初始化容器高度
container.style.height = $('.container').innerWidth()*2/3+"px"
var myChart = echarts.init(container);
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},

series: [
{
name: '中国',
type: 'map',
mapType: 'china',
//selectedMode : 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "#231816"

}
},
borderColor: '#666',
areaColor: '#bbb',
},
emphasis:
{
areaColor:'#3385ff',
label:
{
show:true,
textStyle: {
color: "#f6f6f6"
}
}
}
},
data:[

{name:'吉林', provinceurl:" "},
{name:'辽宁', provinceurl:" "},
{name:'河北', provinceurl:" "},
{name:'河南', provinceurl:" "},
{name:'云南', provinceurl:" "},
{name:'海南', provinceurl:" "},
{name:'江苏', provinceurl:" "},
{name:'重庆', provinceurl:" "},
{name:'天津', provinceurl:" "},
{name:'广西', provinceurl:" "},
{name:'山东', provinceurl:" "},
{name:'内蒙古', provinceurl:" "},
{name:'新疆', provinceurl:" "},
{name:'西藏', provinceurl:" "},
{name:'甘肃', provinceurl:" "},
{name:'四川', provinceurl:" "},
{name:'福建', provinceurl:" "},
{name:'浙江', provinceurl:" "},
{name:'青海', provinceurl:" "},
{name:'安徽', provinceurl:" "},
{name:'陕西', provinceurl:" "},
{name:'山西', provinceurl:" "},
{name:'江西', provinceurl:" "},
{name:'黑龙江', provinceurl:" "},
{name:'贵州', provinceurl:" "},
{name:'上海', provinceurl:" "},
{name:'广东', provinceurl:" "},
{name:'湖北', provinceurl:" "},
{name:'湖南', provinceurl:" "},
{name:'北京', provinceurl:" "},
{name:'宁夏', provinceurl:" "},

]
}
]
};
myChart.setOption(option);
//window.onresize = myChart.resize;//只有宽度变化才变化
//用于使chart自适应高度和宽度
window.onresize = function () {
container.style.height = $('.container').innerWidth()*2/3+"px";
myChart.resize();
};

myChart.on('click', function (params) {
window.open(params.data.provinceurl);
//console.log(params.series.itemStyle);
});

最后附上echarts的链接，方便下载调试，其中还包含其他各种图形组件

http://echarts.baidu.com/echarts2/doc/example.html

使用EChats制作中国地图，点击省份跳转到相应链接相关推荐

echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
python作中国地图背景气泡图_exce表格中怎么制作中国地图背景数据气泡图
exce表格中怎么制作中国地图背景数据气泡图 exce表格中怎么制作中国地图背景数据气泡图?excel表格中想要在中国地图上显示气泡来看看地区分布情况,该怎么设置中国地图气泡图表呢?下面我们就来看看详 ...
python作中国地图背景气泡图_Excel图表中制作中国地图背景气泡图的操作方法
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如何实现这样的气泡图.今天,学习啦小编就教大家在Excel图表中制作中国地图为背景气泡图的操作方法. Exc ...
python作中国地图背景气泡图_excel怎么制作中国地图背景效果的气泡图?
在一些商务PPT,经常能够看见以中国或世界地图作为背景的图表,并且使用气泡图反映数据的大小,如下图所示.该怎使用excel制作气泡图效果呢?下面我们就来看看详细的教程. 软件名称:Microsoft ...
D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
echart+react实现中国地图点击切换省份（使用react hooks封装echart）
实现效果如下: 一.echart封装(react hooks) 实现容器大小发生改变,重新绘制在页面卸载时清理监听以及清除图例实现代码如下 //index.js import React, { u ...
echarts 中国地图点击进入相应省份海南省里的南海诸岛换成诸岛简图
DataV.GeoAtlas地理小工具系列在这里下载了中国以及各省的json文件,但是下面海南那块国家海岸线里有很多岛我不想要,明明已经有个南海诸岛的框了,在那占位置不好看,这时就要改变下Chin ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...

使用EChats制作中国地图，点击省份跳转到相应链接

使用EChats制作中国地图，点击省份跳转到相应链接相关推荐

最新文章

热门文章