' html += '

' + param.name + '

' html += '

总数：' + '' + countByTypeTotal + '家

' for (let i = 0; i < otherArea.length; i++) { html += '

' + otherArea[i] .statisticalColumn + '：' + otherArea[i] .rate + '家

' } html += '

' html += '

' return html } else { let html = '' html += '

' html += '

' + param.name + '

' html += '

' return html } }, }, geo: { show: true, map: 'QN', zoom: 1.23, // 默认显示级别 label: { normal: { show: true, position: 'outside', fontSize: 14, formatter: function (params) { return params.name }, color: '#fff', }, }, roam: false, regions: [ { name: '独山子区', itemStyle: { normal: { areaColor: { // 地图色 type: 'linear', x: 0, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#2945D3', // 0% 处的颜色 }, { offset: 1, color: '#5276E5', // 100% 处的颜色 }], global: false, // 缺省为 false }, }, }, }, { name: '克拉玛依区', itemStyle: { normal: { areaColor: { // 地图色 type: 'linear', x: 0, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#F9A130', // 0% 处的颜色 }, { offset: 1, color: '#F9D239', // 100% 处的颜色 }], global: false, // 缺省为 false }, }, }, }, { name: '乌尔禾区', itemStyle: { normal: { areaColor: { // 地图色 type: 'linear', x: 0, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#4D9AEF', // 0% 处的颜色 }, { offset: 1, color: '#6ABDF9', // 100% 处的颜色 }], global: false, // 缺省为 false }, }, }, }, { name: '白碱滩区', itemStyle: { normal: { areaColor: { // 地图色 type: 'linear', x: 0, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#4A8CE9', // 0% 处的颜色 }, { offset: 1, color: '#4E9FF0', // 100% 处的颜色 }], global: false, // 缺省为 false }, }, }, } ], itemStyle: { // 整个一块 normal: { areaColor: 'transparent', borderColor: '#FFFFFF', borderWidth: 1, shadowColor: '#2c2c2d', shadowBlur: 15, }, // 鼠标移入 emphasis: { show: true, borderColor: '#fff', borderWidth: 2, shadowColor: '#1D284C', shadowOffsetX: 0, shadowOffsetY: 15, shadowBlur: 10, }, }, }, series: [ { type: 'effectScatter', coordinateSystem: 'geo', data: points, symbolSize: '6', showEffectOn: 'render', rippleEffect: { scale: 3, brushType: 'stroke', }, hoverAnimation: true, // 散点样式 itemStyle: { normal: { color: '#FFFFFF', shadowBlur: 10, shadowColor: '#FFFFFF', }, }, zlevel: 1, }, { type: 'map', mapType: 'QN', geoIndex: 0, // 这个会影响地图断层渲染 layoutCenter: ['50%', '50%'], // 地图位置 zoom: 1.23, // 当前视角的缩放比例 roam: false, // 是否开启平游或缩放 data: allArea, } ], }; myChart.setOption(option);

不同区域的渐变地图map