${params.name}

项目个数:

${data.projectNum}

空气质量等级:

${pmLevelDesc}(${data.pmLevel})

项目进度:

${data.projectProgress}%

资金进度:

${data.fundsProgress}%

清洁取暖率:

${data.heatRate}%

`; } option = { tooltip: { trigger: "item", showDelay: 0, transitionDuration: 0.2, borderWidth: 0, padding: 0, backgroundColor: "#FFF", formatter: tooltipFormatter }, geo: { map: 'map', aspectScale: 1.04, //长宽比 zoom: 1.2, roam: false, //禁止缩放 }, series: [{ name: "空气质量热力分布", type: "map", aspectScale: 1.04, //长宽比 zoom: 1.2, roam: false, //禁止缩放 map: "map", itemStyle: { borderWidth: 0 }, emphasis: { label: { show: true } }, label: { show: true, formatter: ({ name }) => { switch (name) { case "莲湖区": return ""; case "碑林区": return ""; case "新城区": return ""; default: return name; } } }, // 文本位置修正 textFixed: { Alaska: [20, -20] }, data: countryData }, { type: 'custom', silent: true, coordinateSystem: 'geo', renderItem: function(params, api) { const data = customData[params.dataIndex] const containerRect = { w: api.getWidth(), h: api.getHeight() } const wh = myChart.convertToPixel('geo', [params.coordSys.x + params.coordSys.width, params.coordSys.y + params.coordSys.height]) const mapRect = { right: wh[0], top: wh[1] } const pos = myChart.convertToPixel('geo', data.value) console.log(mapRect) let points, textPosition if (data.name === '莲湖区') { points = [pos, [containerRect.w / 2, containerRect.h / 5], [containerRect.w / 2 - 40, containerRect.h / 5] ] textPosition = [-40, -20] } else if (data.name === '新城区') { points = [pos, [mapRect.right - 100, mapRect.top + 20], [mapRect.right - 100 + 40, mapRect.top + 20] ] textPosition = [0, -20] } else if (data.name === '碑林区') { points = [pos, [mapRect.right - 100, mapRect.top + 70], [mapRect.right - 100 + 40, mapRect.top + 70] ] textPosition = [0, -20] } return { type: 'group', children: [ { type: 'polyline', shape: { points: points, }, style: { fill: null, stroke: '#68B0FE', lineWidth: 1 } }, { type: 'text', position: textPosition, style: { x: points[1][0], y: points[1][1], text: data.name } } ] } }, data: lineData, }, { name: "mark", silent: true, type: "scatter", coordinateSystem: "geo", data: markPoints, clip: false, symbol: icoMark, symbolSize: [30, 40] } ] } let count = 1, count1 = 0, total = countryData.length; timer=1 function autoTip() { setInterval(function() { var curr = count % total; console.info("curr:" + curr); myChart.dispatchAction({ type: 'mapSelect', seriesIndex: 0, // 因为只有一组数据，所以此处应为0 dataIndex: curr }); myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, // 因为只有一组数据，所以此处应为0 dataIndex: curr }); count += 1; }, timer*1000); setInterval(function() { var curr1 = count1 % total; console.info("curr1:" + curr1); myChart.dispatchAction({ type: 'mapUnSelect', seriesIndex: 0, // 因为只有一组数据，所以此处应为0 dataIndex: curr1 }); count1 += 1; }, timer*1000); } autoTip() myChart.setOption(option);

Echarts在线免费图表