// 中国地图散点分布点击散点触发自定义样式的 tooltip // 借鉴 https://gallery.echartsjs.com/editor.html?c=xnmZ5X4gCz // 散点数据 var data = [ { name: '北京移动数据中心-马连道机房', value: ['116.489356', '39.94083'], date: '2019-10-01', city: '北京市', }, ]; var data2 = [ { name: '北京', value: 177 }, { name: '天津', value: 42 }, { name: '河北', value: 102 }, { name: '山西', value: 81 }, { name: '内蒙古', value: 47 }, { name: '辽宁', value: 67 }, { name: '吉林', value: 82 }, { name: '黑龙江', value: 66 }, { name: '上海', value: 24 }, { name: '江苏', value: 92 }, { name: '浙江', value: 114 }, { name: '安徽', value: 109 }, { name: '福建', value: 116 }, { name: '江西', value: 91 }, { name: '山东', value: 119 }, { name: '河南', value: 137 }, { name: '湖北', value: 116 }, { name: '湖南', value: 114 }, { name: '重庆', value: 91 }, { name: '四川', value: 125 }, { name: '贵州', value: 62 }, { name: '云南', value: 83 }, { name: '西藏', value: 9 }, { name: '陕西', value: 80 }, { name: '甘肃', value: 56 }, { name: '青海', value: 10 }, { name: '宁夏', value: 18 }, { name: '新疆', value: 67 }, { name: '广东', value: 123 }, { name: '广西', value: 59 }, { name: '海南', value: 14 }, ]; option = { backgroundColor: '#efefef', tooltip: { show: true, trigger: 'item', triggerOn: 'click', padding: 0, enterable: true, transitionDuration: 1, textStyle: { color: '#000', decoration: 'none', }, formatter: function (params) { console.log(params); const { data } = params; const type = data.type; let typeName = '数据中心'; const tipHtml = `

${data.name}

建设位置：${data.city}

建设时间：${data.date}

设施类型：${typeName}

`; return tipHtml; }, }, visualMap: { show: true, min: 0, max: 200, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默认为数值文本 calculable: true, seriesIndex: [1], inRange: { color: ['#00467F', '#A5CC82'], // 蓝绿 }, }, geo: { show: true, map: 'china', label: { normal: { show: true, color: '#fff', }, emphasis: { color: '#000000', fontSize: 14, show: true, }, }, roam: true, scaleLimit: { min: 1.2, max: 15, }, zoom: 1.2, itemStyle: { normal: { borderWidth: 1, // 区域边框宽度 borderColor: '#029fd4', // 区域边框颜色 areaColor: '#2F639A', // 区域颜色 }, emphasis: { areaColor: '#2F639A', }, }, }, series: [ { name: '散点', type: 'scatter', coordinateSystem: 'geo', data: data, symbol: 'pin', symbolSize: 30, label: { normal: { show: false, }, emphasis: { show: false, }, }, itemStyle: { normal: { color: '#33C481', }, emphasis: { color: '#f00', }, }, }, { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: true, }, emphasis: { show: false, textStyle: { color: '#fff', }, }, }, roam: 'scale', itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7', }, }, animation: false, data: data2, }, ], }; myChart.on('click', (params) => { if (params.componentType === 'series' && params.componentSubType === 'scatter') { const index = params.dataIndex; // 取消所有散点高亮 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, //第几条series }); // 显示指定data 的tooltip // myChart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, //第几条series // dataIndex: index, //第几个tooltip // }); // 高亮指定的散点 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, //第几条series dataIndex: index, //第几个tooltip }); } });

XX数据中心统计图