做項目時，會遇到一些零碎的技術點。記錄下來以防忘記
需求：做可視化界面，但是需要兼容ie8，需要用純css、js 的H5頁面對接echarts，下面為效果圖（帶定時器循環顯示tooltip）。
實現方式（此處為一個中央雲南地圖的實現方法）：
1、定義容器
// 頁面邏輯
<div class="sp-ynsdt" id="main4"></div>
2、聲明參數
var myChart4 = echarts.init(document.getElementById('main4'));
var geoCoordMap = { // 經緯度
'昆明市': [102.712251, 25.540609],
'昭通市': [103.717216, 27.336999],
'曲靖市': [103.797851, 25.501557],
'楚雄州': [101.546046, 25.041988],
'玉溪市': [102.543907, 24.350461],
'紅河州': [102.384182, 23.366775],
'文山州': [104.24401, 23.36951],
'普洱市': [100.972344, 22.777321],
'西雙版納州': [100.797941, 22.001724],
'大理州': [100.225668, 25.589449],
'保山市': [99.167133, 25.111802],
'德宏州': [98.578363, 24.436694],
'麗江市': [100.233026, 26.872108],
'怒江州': [98.854304, 25.850949],
'迪慶州': [99.06463, 27.826853],
'臨滄市': [100.08697, 23.886567]
},
// 雲南省人口數
rawData = [{
name: '昆明市',
value: 335,
renkou: 100,
mianji: 300
},
{
name: '玉溪市',
value: 234,
renkou: 100,
mianji: 300
},
{
name: '曲靖市',
value: 310,
renkou: 100,
mianji: 300
},
{
name: '紅河州',
value: 210,
renkou: 100,
mianji: 300
},
{
name: '昭通市',
value: 455,
renkou: 100,
mianji: 300
},
{
name: '麗江市',
value: 153,
renkou: 100,
mianji: 300
},
{
name: '楚雄州',
value: 153,
renkou: 100,
mianji: 300
},
{
name: '文山州',
value: 310,
renkou: 100,
mianji: 300
},
{
name: '普洱市',
value: 210,
renkou: 100,
mianji: 300
},
{
name: '西雙版納州',
value: 234,
renkou: 100,
mianji: 300
},
{
name: '大理州',
value: 135,
renkou: 100,
mianji: 300
},
{
name: '保山市',
value: 310,
renkou: 100,
mianji: 300
},
{
name: '德宏州',
value: 455,
renkou: 100,
mianji: 300
},
{
name: '怒江州',
value: 234,
renkou: 100,
mianji: 300
},
{
name: '迪慶州',
value: 135,
renkou: 100,
mianji: 300
},
{
name: '臨滄市',
value: 135,
renkou: 100,
mianji: 300
},
]
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);