# 地图数据获取

获取地址：DataV.GeoAtlas地理小工具系列

# 地图渲染

// 地图
mapOption: {
title: {text: '作物省市分布图',left: 'left',subtext: 'provincial and cities distribution of crops'
},
// 浮窗样式
tooltip: {show: true, // 提示浮窗是否显示trigger: 'item', // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。alwaysShowContent: false,backgroundColor: '#FFF', // 提示浮窗背景颜色borderColor: 'rgba(0, 0, 0, 0.16);',hideDelay: 100,triggerOn: 'mousemove', // 鼠标移动出现浮窗，也可以是click等enterable: true,textStyle: {color: '#303133',fontSize: '12',width: 20,height: 30,overflow: 'break'},
},
// 颜色渐变
visualMap: {show: false,min: 0,max: 10000,left: '10%',top: 'bottom',calculable: true,seriesIndex: [0],inRange: {color: ["#CCD9F9", "#98B2F3", "#668DEE", "#394F85"]}
},// 浮窗内容
formatter (params) {params.data = params.data || {}const value = params.data.value || '0'return `名称：${params.name}` + `，种子数目：${value}`
},geo: {map: 'china',type: 'map',zoom: 1.2,          // 地图放大aspectScale: 0.8, //地图宽高比例roam: true,        //地图缩放、平移label: {show: true,color: "#606266",},// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},emphasis: {itemStyle: {color: "#303133",areaColor: "red"}}
},
series: [{geoIndex: 0,  // 将数据和第0个geo配置关联在一起（不太理解，但是去掉会出错）type: 'map',data: [],
}]
},

# 定时器滚动

intervalBegin (myChart, mapList) {
var hourIndex = 0;
var carouselTime = null;carouselTime = setInterval(() => {//dispatchAction echarts的API：触发图表行为myChart.dispatchAction({type: "downplay", //downplay 取消高亮指定的数据图形seriesIndex: 0});myChart.dispatchAction({type: "highlight", //highLight 高亮指定的数据图形seriesIndex: 0, //系列indexdataIndex: hourIndex //数据index});myChart.dispatchAction({type: "showTip", //showTip 显示提示框seriesIndex: 0,dataIndex: hourIndex});hourIndex++;//当循环到数组当中的最后一条数据后，重新进行循环if (hourIndex > mapList.length) {hourIndex = 0;}
}, 3000);//鼠标移入组件时停止轮播
myChart.on("mousemove", (e) => {clearInterval(carouselTime); //清除循环myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex});
});
//鼠标移出组件时恢复轮播
myChart.on("mouseout", () => {carouselTime = setInterval(() => {myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: hourIndex});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: hourIndex});hourIndex++;if (hourIndex > mapList.length) {hourIndex = 0;}}, 3000);
});
},

# 特殊样式设置

1、地图颜色渐变

// 颜色渐变
visualMap: {show: false,min: 0,max: 10000,left: '10%',top: 'bottom',calculable: true,seriesIndex: [0],inRange: {color: ["#CCD9F9", "#98B2F3", "#668DEE", "#394F85"]}
},

2、地图默认选中颜色

geo: {map: 'china',type: 'map',zoom: 1.2,          // 地图放大aspectScale: 0.8, //地图宽高比例roam: true,        //地图缩放、平移label: {show: true,color: "#606266",},// 滚轮缩放的极限控制scaleLimit: {min: 0.5, //缩放最小大小max: 6, //缩放最大大小},label: { // 设置默认地图状态//itemStyle: {// color: "#303133",// areaColor: "red"//}},emphasis: {  // 选中样式设置itemStyle: {color: "#303133",areaColor: "red"}}
},

3、浮窗样式

// 浮窗内容
formatter (params) {params.data = params.data || {}const value = params.data.value || '0'return `名称：${params.name}` + `，种子数目：${value}`
},