做項目時,會遇到一些零碎的技術點。記錄下來以防忘記
需求:做可視化界面,但是需要兼容ie8,需要用純css、js 的H5頁面對接echarts,下面爲效果圖(帶定時器循環顯示tooltip)。
實現方式(此處爲一箇中央雲南地圖的實現方法):
1、定義容器
// 頁面邏輯
<div class="sp-ynsdt" id="main4"></div>
2、聲明參數
var myChart4 = echarts.init(document.getElementById('main4'));
3、配置echarts參數樣式
// 打點函數
function convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(0),
renkou: data[i].renkou,
mianji: data[i].mianji
// value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
// 各州市人口面積分布圖
var yunnanoprtion = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.name + '人口:' + params.data.renkou + '萬人' + '\n' + '面積:' + params.data.mianji + '平方千米';
}
},
title: {
text: '',
// subtext: '數據來自網絡',
textStyle: {
color: '#8B4513',
fontSize: 20, // 標題字體大小
right: '50%'
},
},
visualMap: {
show: false,
min: 0,
max: 400,
left: 20,
bottom: 10,
text: ['高', '低'], // 文本,默認爲數值文本
color: ['#87cefa', '#e8f630', '#ff4500'],
calculable: false
},
geo: {
map: '雲南',
roam: true,
top: '4%',
zoom: 1.1,
roam: false,
aspectScale: 1,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
},
show: false,
formatter: function (params) {
return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面積:' + params.data.mianji +
' km²';
},
textStyle: {
top: '-80px',
color: '#000040', // 地圖區域字體顏色
fontSize: 0.1, // 地圖區域字體大小
opacity: 1, // 地圖區域字體透明級別
backgroundColor: 'rgba(0,23,11,0)' // 地圖區域字體背景顏色 rgba(0,23,11,0)
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
name: '雲南',
type: 'scatter',
coordinateSystem: 'geo',
left: 'center',
top: 'top',
map: '雲南',
data: convertData(rawData),
symbolSize: 10,
// symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
symbolRotate: 35,
zoom: 1.3,
mapLocation: {
x: 'left'
},
// position: ['20%', '60%'],
// regionHeight: 2,
top: '4%',
itemStyle: {
normal: {
label: {
show: false,
textStyle: {
color: "#fff",
fontSize: 9
}
}
},
emphasis: {
label: {
show: true,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
label: {
show: true,
formatter: function (params) {
return params.data.name + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面積:' + params.data.mianji +
' km²';
},
textStyle: {
top: '-80px',
color: '#000040', // 地圖區域字體顏色
fontSize: 0.1, // 地圖區域字體大小
opacity: 1, // 地圖區域字體透明級別
backgroundColor: 'rgba(0,23,11,0)' // 地圖區域字體背景顏色 rgba(0,23,11,0)
}
},
light: {
main: {
color: '#eee9e7', // 光照顏色
intensity: 1.2, // 光照強度
shadowQuality: 'high', // 陰影亮度
shadow: true, // 是否顯示陰影
alpha: 60,
beta: 10
},
ambient: {
intensity: 0.3
}
}
}, {
name: 'categoryA',
type: 'map',
geoIndex: 0,
// tooltip: {show: false},
data: rawData
}]
};
4、加載地圖
myChart4.setOption(yunnanoprtion)
定時器循環顯示tooltip
// 必須要設置tooltip
var index = 0; //播放所在下標
this.mTime = setInterval(function () {
myChart4.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if (index >= rawData.length) {
index = 0;
}
}, 600);