echarmap使用教程

来源：互联网发布：百度关键词排名软件编辑：程序博客网时间：2024/06/10 21:13

1. 导入地图显示所需要的js包。
<script src="tool/echarts.js"></script>
<script src="map/js/china.js"></script>
<script src="map/js/福建.js"></script>
<script src="map/js/fujian.js"></script>
<script src="map/js/quanzhou.js"></script>

2. 更改js中的注册map。如下图显示

注册的名字是索引的关键

3 设置对应的DIV作为显示

</div>

4.引入以下的js

//获取所在div

varmapChart = echarts.init(document.getElementById('map-wrap'));

//假数据，name与js中对应

varmyData = [

{name: '北京',selected:false,value:1},

{name: '天津',selected:false,value:2},

{name: '上海',selected:false,value:3},

{name: '重庆',selected:false,value:4},

{name: '河北',selected:false,value:5},

{name: '河南',selected:false,value:6},

{name: '云南',selected:false,value:7},

{name: '辽宁',selected:false,value:8},

{name: '黑龙江',selected:false,value:9},

{name: '湖南', selected:false,value:10},

{name: '安徽',selected:false,value:11},

{name: '山东',selected:false,value:12},

{name: '新疆',selected:false,value:13},

{name: '江苏',selected:false,value:14},

{name: '浙江',selected:false,value:15},

{name: '江西',selected:false,value:16},

{name: '湖北',selected:false,value:17},

{name: '广西',selected:false,value:18},

{name: '甘肃',selected:false,value:19},

{name: '山西', selected:false,value:20},

{name: '香港',selected:false,value:33},

{name: '澳门',selected:false,value:34},

{name: '南海诸岛',selected:false,value:34},

{name: '泉州市',selected:false,value:134},

{name: '安溪县',selected:false,value:84}

]//各省地图颜色数据依赖value;

//地图的相关设置

varoption = {

//设置散点

series: [

{

name: '随机数据',

type: 'map',

mapType: 'china',

selectedMode : 'single',

itemStyle:{

normal:{

label:{show:true},

borderWidth:1,//省份的边框宽度

borderColor:'#f60',//省份的边框颜色

color:'#ece2df'//地图背景颜色

//areaStyle:{color:'#f60'}//设置地图颜色

emphasis:{label:{show:true}}

data:myData

}

//右边显示的色差表

visualMap: {

type: 'continuous', // 连续型

min: 0, // 值域最小值，必须参数

max: 200, // 值域最大值，必须参数

calculable: true, // 是否启用值域漫游

inRange: {

color:['#50a3ba','#eac736','#d94e5d']

// 指定数值从低到高时的颜色变化

}

};

//加载设置

mapChart.setOption(option);

//设置点击事件

mapChart.on("click",chartClick);

function chartClick(param){

mapChart.setOption(option, false);

//获取省份的名字

var selectedPro = param.name;

alert(selectedPro);

//对原地图进行更新

option.series[0] = {

name: selectedPro,

type: 'map',

mapType: selectedPro,

selectedMode : 'single',

itemStyle:{

normal:{

label:{show:true},

borderWidth:1,//省份的边框宽度

borderColor:'#f60',//省份的边框颜色

color:'#ece2df'//地图背景颜色

//areaStyle:{color:'#f60'}//设置地图颜色

emphasis:{label:{show:true}}

mapLocation: {

x: '35%'

roam: true,

data:myData,

visualMap: {

type: 'continuous', // 连续型

min: 0, // 值域最小值，必须参数

max: 200, // 值域最大值，必须参数

calculable: true, // 是否启用值域漫游

inRange: {

color:['#50a3ba','#eac736','#d94e5d']

// 指定数值从低到高时的颜色变化

}

};

mapChart.setOption(option, true);

}

</script>

阅读全文

0 0