const mapUrl = '/siteassets/chart/echarts/options/de186498-5040-42bd-89ef-e78a24cc4b01.json' const yinzi = 'aqi' const tableData = [ { districtName: '长丰县', aqi: '70', pm10: '45', pm25: '45', o3: '45', so2: '58', no2: '120', co: '1' }, { districtName: '包河区', aqi: '40', pm10: '24', pm25: '63', o3: '25', so2: '102', no2: '140', co: '2' }, { districtName: '蜀山区', aqi: '80', pm10: '90', pm25: '87', o3: '68', so2: '150', no2: '170', co: '8' }, { districtName: '庐江县', aqi: '120', pm10: '102', pm25: '234', o3: '92', so2: '180', no2: '23', co: '10' }, { districtName: '庐阳区', aqi: '160', pm10: '150', pm25: '53', o3: '105', so2: '42', no2: '58', co: '8' }, { districtName: '肥西县', aqi: '201', pm10: '173', pm25: '156', o3: '155', so2: '100', no2: '180', co: '9' }, { districtName: '肥东县', aqi: '280', pm10: '67', pm25: '257', o3: '180', so2: '80', no2: '240', co: '12' }, { districtName: '瑶海区', aqi: '300', pm10: '250', pm25: '35', o3: '170', so2: '130', no2: '57', co: '13' }, { districtName: '巢湖市', aqi: '56', pm10: '221', pm25: '187', o3: '258', so2: '140', no2: '24', co: '15' } ] $.get(mapUrl, function (getJson) { let data = [] let regions = [] tableData.forEach(item => { data.push({ name: item.districtName, value: item[yinzi], }) regions.push({ name: item.districtName, itemStyle: { normal: { areaColor: Color(item[yinzi], yinzi), }, emphasis: { areaColor: Color(item[yinzi], yinzi), }, }, }) }) echarts.registerMap('hefei', getJson); const option = { tooltip: { formatter: function (params) { let tip=params.name + '：'+params.value return tip } }, geo: { map: "hefei", roam: true, scaleLimit: { min: 1, max: 2 }, zoom: 1.1, label: { normal: { show: !0, fontSize: "14", color: "rgba(0,0,0,0.7)" } }, itemStyle: { normal: { borderColor: "rgba(0, 0, 0, 0.2)" }, emphasis: { areaColor: "#f2d5ad",//悬浮背景 } }, regions: regions }, series: [{ name: '地市', data: data }] } myChart.setOption(option, true); }) //污染因子等级对应颜色 function Color(value, name) { if (name == 'aqi_lb') { let color = '' if (value === '优') { color = '#00E400' } else if (value === '良') { color = '#ffff00' } else if (value === '轻度污染') { color = '#ff7e00' } else if (value === '中度污染') { color = '#ff0000' } else if (value === '重度污染') { color = '#99004c' } else if (value === '严重污染') { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'aqi') { let color = '' if (value >= 0 && value <= 50) { color = '#00E400' } else if (value > 50 && value <= 100) { color = '#ffff00' } else if (value > 100 && value <= 150) { color = '#ff7e00' } else if (value > 150 && value <= 200) { color = '#ff0000' } else if (value > 200 && value <= 300) { color = '#99004c' } else if (value > 300) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'pm25') { let color = '' if (value >= 0 && value <= 35) { color = '#00E400' } else if (value > 35 && value <= 75) { color = '#ffff00' } else if (value > 75 && value <= 115) { color = '#ff7e00' } else if (value > 115 && value <= 150) { color = '#ff0000' } else if (value > 150 && value <= 250) { color = '#99004c' } else if (value > 250) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'pm10') { let color = '' if (value >= 0 && value <= 50) { color = '#00E400' } else if (value > 50 && value <= 150) { color = '#ffff00' } else if (value > 150 && value <= 250) { color = '#ff7e00' } else if (value > 250 && value <= 350) { color = '#ff0000' } else if (value > 350 && value <= 420) { color = '#99004c' } else if (value > 420) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'no2') { let color = '' if (value >= 0 && value <= 100) { color = '#00E400' } else if (value > 100 && value <= 200) { color = '#ffff00' } else if (value > 200 && value <= 700) { color = '#ff7e00' } else if (value > 700 && value <= 1200) { color = '#ff0000' } else if (value > 1200 && value <= 2340) { color = '#99004c' } else if (value > 2340) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'so2') { let color = '' if (value >= 0 && value <= 150) { color = '#00E400' } else if (value > 150 && value <= 500) { color = '#ffff00' } else if (value > 500 && value <= 650) { color = '#ff7e00' } else if (value > 650 && value <= 800) { color = '#ff0000' } else if (value > 800) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'co') { let color = '' if (value >= 0 && value <= 5) { color = '#00E400' } else if (value > 5 && value <= 10) { color = '#ffff00' } else if (value > 10 && value <= 35) { color = '#ff7e00' } else if (value > 35 && value <= 60) { color = '#ff0000' } else if (value > 60 && value <= 90) { color = '#99004c' } else if (value > 90) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'o3') { let color = '' if (value >= 0 && value <= 160) { color = '#00E400' } else if (value > 160 && value <= 200) { color = '#ffff00' } else if (value > 200 && value <= 300) { color = '#ff7e00' } else if (value > 300 && value <= 400) { color = '#ff0000' } else if (value > 400 && value <= 800) { color = '#99004c' } else if (value > 800) { color = '#7e0023' } else { color = '#666666' } return color } else if (name == 'oh') { let color = '' if (value <= 160) { color = '#00E400' } else if (value > 160 && value <= 200) { color = '#ffff00' } else if (value > 200 && value <= 300) { color = '#ff7e00' } else if (value > 300 && value <= 400) { color = '#ff0000' } else if (value > 400 && value <= 800) { color = '#99004c' } else if (value > 800) { color = '#7e0023' } return color } }

动态渲染地图颜色