let geoJSON const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://img.58h.com.cn/json-174251994545205.json', false); xhr.onload = function () { if (xhr.status >= 200 && xhr.status < 300) { // 请求成功，处理响应 // console.log('Response:', JSON.parse(xhr.responseText)); geoJSON = JSON.parse(xhr.responseText) } else { // 处理错误 console.error('Error:', xhr.statusText); } }; xhr.send(); const pointOption = [ { name: '南京', value: [118.796, 32.0583] }, { name: '西安', value: [108.94, 34.341101] }, { name: '上海', value: [121.474, 31.230001] }, { name: '重庆', value: [106.552003, 29.562696] }, { name: '西宁', value: [101.778, 36.6172] }, { name: '北京', value: [116.407001, 39.9046] }, { name: '广州', value: [113.264999, 23.129101] }, { name: '长春', value: [125.32, 43.82] }, ] const lineOption = [] const talentList = [ { name: '博士研究生', value: '3', unit: '人' }, { name: '硕士研究生', value: '21', unit: '人' }, { name: '副高及以上', value: '36', unit: '人' } ] const lastPoint = { name: '绵阳经开区', value: [104.774522, 31.399113], lineStyle: { color: '#FF6C66' } } const colorList = ['#D88BFF', '#5abead', '#66FFFF', '#48D5FF', '#FFE73D', '#66FFFF'] pointOption.map((item, index) => { item.lineStyle = { color: colorList[index % colorList.length] } item.coords = [item.value, lastPoint.value] lineOption.push(item) }) pointOption.push(lastPoint) const option = { tooltip: { trigger: 'item', position: function (point, params, dom, rect, size) { var x = 0 // x坐标位置 var y = 0 // y坐标位置 // 当前鼠标位置 var pointX = point[0] var pointY = point[1] // 提示框大小 var boxWidth = size.contentSize[0] / 2 var boxHeight = size.contentSize[1] + 50 // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = pointX + 10 } else { // 左边放的下 x = pointX - boxWidth - 10 } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5 } else { // 上边放得下 y = pointY - boxHeight } return [x, y] }, show: true, enterable: true, borderWidth: 0, textStyle: { fontSize: 0, color: 'transparent' }, backgroundColor: 'transparent', extraCssText: 'box-shadow: 0 0 0 transparen', padding: 0, triggerOn: 'none', formatter: params => { const { componentType, data, dataIndex } = params if (componentType === 'series' && data) { let tipHtml = '

' tipHtml += `

人才引进情况

` tipHtml += `

` for (let i = 0; i < talentList.length; i++) { const item = talentList[i] tipHtml += `

${Math.ceil(item.value * (0.5 + dataIndex))} ${item.unit}

${item.name}

` } tipHtml += `

` tipHtml += '

' return tipHtml } } }, geo: [ { map: 'china', zoom: 1.5, z: 70, top: '150px', selected: false, label: { show: false, padding: 4, color: '#ddd', fontFamily: 'pf-zh' }, itemStyle: { areaColor: { image: 'https://img.58h.com.cn/image-174251997924978.png', repeat: 'repeat' }, borderColor: 'rgba(147,234,245,.5)', borderWidth: 1 }, emphasis: { disabled: true }, regions: [ { name: '南海诸岛', emphasis: { disabled: true }, itemStyle: { borderWidth: 1 } } ] }, { type: 'map', map: 'china', zoom: 1.52, z: 60, top: '150px', selected: false, // left: '15.8%', itemStyle: { areaColor: '#177db7' }, emphasis: { disabled: true }, regions: [ { name: '南海诸岛', emphasis: { disabled: true }, itemStyle: { areaColor: 'transparent', borderWidth: 0 } } ] } ], series: [ // 水波圈效果 { type: 'effectScatter', coordinateSystem: 'geo', showEffectOn: 'render', z: 90, rippleEffect: { period: 12, scale: 4, brushType: 'fill' }, label: { formatter: '{b}', position: 'top', offset: [0, -10], color: '#1DE9B6', show: true, fontSize: 12 }, itemStyle: { color: value => { // console.log(value, 'lll') return value.data.lineStyle.color || '#5abead' }, shadowBlur: 10, shadowColor: '#333' }, symbolSize: 8, data: pointOption }, // 流转线效果 { type: 'lines', z: 100, effect: { show: true, period: 8, // 箭头指向速度，值越小速度越快 trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重 symbol: 'arrow', // 箭头图标 symbolSize: 5 // 图标大小 }, lineStyle: { color: '#1DE9B6', width: 1, // 线条宽度 opacity: 0.1, // 尾迹线条透明度 curveness: 0.3 // 尾迹线条曲直度 }, data: lineOption } ] } echarts.registerMap('china', geoJSON) let timer let index = 0 const onHighlight = () => { return setInterval(() => { if (index < pointOption.length - 1) { index++ } else { index = 0 } myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }) }, 3600) } timer = onHighlight() myChart.on('mouseover', params => { timer && clearInterval(timer) }) myChart.on('mouseout', params => { timer && clearInterval(timer) timer = onHighlight() }) function loadCssCode(code) { var style = document.createElement('style') style.type = 'text/css' style.rel = 'stylesheet' try { //for Chrome Firefox Opera Safari style.appendChild(document.createTextNode(code)) } catch (ex) { //for IE style.styleSheet.cssText = code } var head = document.getElementsByTagName('head')[0] head.appendChild(style) } loadCssCode('@keyframes jumpBoxHandler {0% {transform: translate(0px, 0px);} 50% {transform: translate(0px, 20px);} 100% {transform: translate(0px, 0px);}}')

Echarts在线免费图表