Echarts 중국 지도 각 성, 시, 자치구 사용자 정의 색상

 
머리말
최근 에 아웃 소 싱 프로젝트 를 받 았 는데 그 중에서 하나의 수 요 는 이 렇 습 니 다. 중국의 통계 지 도 를 보 여 주 려 면 각 성의 시내 가 서로 다른 색깔 이 므 로 반드시 특별 하 게 구분 해 야 합 니 다.남해 부분 을 숨 기 고Echats 관련 문 서 를 보 니 비슷 한 demo 가 있 었 지만 요구 에 부합 되 지 않 았 습 니 다.그래서 스스로 문 서 를 자세히 읽 고 연구 했다.문 제 를 해결 할 방법 을 찾 아 공유 하 다.
본문
쓸데없는 말 이 많 지 않 으 니, 직접 코드 를 붙 여 라.
방법 (데이터 에 직접 스타일 추가)
배경 이 맞 아야 할 data 데이터 구 조 는 다음 과 같 습 니 다.

data: {
    {name: '  ',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '  ',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '    ',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}}, .......... } // areaColor            // opacity        ，               （       ，                  ，           ，           ，        ！） 

전단 설정 정보

option = {

    .......       
    
    series: [{
        type: 'map',
        name: 'tips  ',
        data: data }] } 

방법 (설정 에 스타일 을 추가 하고 데이터 에 색상 을 정의 합 니 다)
배경 이 맞 아야 할 data 데이터 구 조 는 다음 과 같 습 니 다.

data: {
    {"name": "  ", "value": 34, "count": 500, "color": "#f00"}, {"name": "  ", "value": 33, "count": 300, "color": "#ff0"}, {"name": "  ", "value": 32, "count": 50, "color": "#f0f"}, {"name": "  ", "value": 31, "count": 50, "color": "#0f0"}, {"name": "  ", "value": 30, "count": 120, "color": "#00f"}, ........ } 

전단 설정 정보

// data        ,    。
var customSettings = []; data.forEach(function (item, index) { customSettings.push({  name: item.name,  itemStyle: {  areaColor: item.color,  color: item.color } }) }) //       ，push     customSettings.push( {  name: '    ',  itemStyle: {  normal: {  opacity: 0,  label: {  show: false } } } } ) option = { .......         geo: {  map: 'china',  top: 0,  bottom: 0,  regions: customSettings //        。 }  series: [{  type: 'map',  name: 'tips  ',  data: data }] } 

총결산
이것 은 제 가 현재 발견 한 두 가지 방안 입 니 다. 각각 우열 이 있 습 니 다. 첫 번 째 는 배경 지원 이 필요 합 니 다. 당신 이 필요 로 하 는 데 이 터 를 되 돌려 야 하지만 돌아 오 는 데이터 에 지 니 고 있 는 데 이 터 는 양 이 많 습 니 다.하지만 앞부분 으로 돌아 가 스스로 조립 데 이 터 를 순환 할 수도 있다.두 번 째 방법 과 차이 가 많 지 않 은 순환 방식 은 모두 가능 하 다.