1. 직사각형의 구성도 수는, 다음에 입력 파이 트리 맵을 직접 배치된다.
수정 유형
option.series.type = '트리 맵';
닫기 빵 부스러기
option.series.breadcrumb = 거짓;
가까이 이동 마우스의 효과를 덮고
option.series.hoverAnimation을 = 거짓;
프롬프트 끄기
= false를 option.tooltip.show을,
히스토그램을 클릭 폐쇄 노드 이벤트
option.series.nodeClick = 거짓;
마우스 응답 이벤트 끄고
거짓 = option.series.silent을;
마우스 휠 이벤트 해제
= 거짓 option.series.roam을;
피치 폭을 여러 수치 사이에는
option.series.itemStyle = {통상 {gapWidth : 1} };
표 라벨 문자 위치 내부에 배치
option.series.data [I] = {.label 위치 : '3 %', '3 %']};
내부로도 그라데이션
대 (VAR의 J = 0; J <option.series.data.length, J ++) {
VAR colorList = [ "RGB (35, 64, 98) ','RGB (43, 99, 120) '], [' RGB (35, 64, 98) ','RGB (43, 99, 120) '], ['RGB (31, 60, 94) ','RGB (40, 107, 152) '], ['RGB ( 25, 60, 98) ','RGB (25, 96, 138) '], ['RGB (35, 64, 98) ','RGB (43, 99, 120) '], ['RGB (15 47, 94) ','RGB (9, 71, 144) '], ['RGB (25, 60, 98) ','RGB (25, 96, 138) '], ['RGB (31, 60, 94) ','RGB (40, 107, 152) '], ['RGB (47, 121, 134) ','RGB (6, 100, 125) "];
option.series.data [J] = {.itemStyle
색상 : 새로운 echarts.graphic.RadialGradient (0.5, 0.5, 1, [{
오프셋 : 0,
색 : colorList [J] [0]
},
};
}
레이블 텍스트 여기에 직접 변경 + 실수가있을 것입니다, 그래서 단지 문자열 CONCAT를 조립하는 데 사용할 수 있습니다
option.series.label.normal = {
풍부한 {
좌측 {
정렬 : '왼쪽'
}
}
포맷터 : 함수 (a) {
agf.push (a.dataIndex);
VAR의 sumData = 0;
위한 VAR (I = 0; i가 option.series.data.length를 <; 내가 ++) {
sumData option.series.data + = [I] .value;
}
VAR 퍼크 새로운 번호 = ((a.value / sumData) * 100);
STR = '{이름 |';
'\ n \ n ¥'perc.toFixed (2), '%'를, '\ n \ n}'str.concat (a.name를 반환 fmoney (a.value, 2) '百万元' );
}
};
다음과 같은 효과가 있습니다 :
2. X 축 데이터의 특정 순서의 배열 (즉, 취득 된 데이터는 얻을되어있는 그룹에 인덱스 번호를 분류하는)
option.series dataSer = VAR [0] .DATA;
var에 dataSer1 option.series = .DATA [1.]; // 나는이 두 시리즈의 두 세트를 가지고, 자신의 직접 순환에 따라 얻을 수있는
VAR DATAX = 옵션을 선택합니다. x 축 [0] .DATA,
VAR의 sortArr = "2018 제 분기", "2018 년 2/4 분기", "2018 년 3/4 분기", "2018 년 4/4 분기"2017 년 4/4 분기 '' ' 2019 ","2/4 분기 ","2019 년 3/4 분기 "] 2,019의 제 분기,
VAR의 sortSer = [],
sortSer1 = [],
sortX = [];
VAR 인덱스;
대 (VAR의 I = 0; I <sortArr .length; I는 ++) {
인덱스 = dataX.indexOf (sortArr [I])
IF (인덱스> -1) {
sortX.push (DATAX [인덱스]);
sortSer.push (dataSer [인덱스]);
sortSer1.push ( dataSer1 [인덱스]);
}
option.series [0] = sortSer .DATA;
option.series [1.].데이터 = sortSer1;
option.xAxis [0] = .DATA sortX;
x 축 절단 할 수 3. 과도한 텍스트 랩 (내가 여기있는 줄은 다섯 개 단어입니다)
위한 VAR (I = 0; I <option.xAxis [0] .data.length; 내가 ++) {
option.xAxis [0] .DATA [I] = option.xAxis [0] .DATA [I] .slice (0 5) + '\ n'+ option.xAxis [0] .DATA [I] .slice (5);
}
4. 색상 설정
-------------------------------------------------- ------------------------- (다른 색의 변화에 대한) 서로 다른 색상의 열
option.series [0] = {.itemStyle 정상 { 컬러 : 함수합니다 (PARAMS) { VAR colorList = "089CFE #", "#의 089CFE", "#의 089CFE", "#의 089CFE", "#의 089CFE", "#의 74EFFF"] 반환 colorList [params.dataIndex] } }
-------------------------------------------------- ------ 열 구배
option.series [0] = {.itemStyle
정상 {
색상 : 새로운 새 echarts.graphic.LinearGradient (
0, 0, 0 ,. 1, [{
오프셋 : 0
컬러 '# 06B5D7 '
},
{
오프셋 :. 1
색상'#의 1E3FF7 '
}
])
}
};
-------------------------------------------------- --------------------------柱子渐变加不同色
option.series [0] = {.itemStyle
정상 {
색상 : 함수 (PARAMS) {
var에 colorList = [ "RGB (120,186,247) ','RGB (98,132,227) '], ['RGB (229,90,67) ','RGB (183,52,20) '], ['RGB (255,176 35) ','RGB (228,151,23) '], ['RGB (33,247,183) ','RGB (12,181,133) '];
VAR 지수 = params.dataIndex;
경우 (params.dataIndex> = colorList.length) {
인덱스 = params.dataIndex - colorList.length;
}
새로운 echarts.graphic.LinearGradient (0, 0, 0, 1을 반환 [{
오프셋 : 0,
색 :
{
오프셋 : 1,
색 : colorList [인덱스] [1]
}]);
}
}
};
세부 사항의 변형
option.series.hoverAnimation = 거짓; // 닫기 하이라이트 효과
//가 포함할지 여부를 묻는 메시지가; option.tooltip.show = 거짓
= 거짓 option.legend.selectedMode을; // 선택 효과
= false를 option.series.clickable; // 효과를 클릭
---------------------------------------------- -------- 프롬프트 텍스트 제공
option.series.label.normal.formatter = '{D} %';
--------------------- -------------------------------- 파이 프롬프트 텍스트 취재 후 마우스
option.series.label.emphasis.formatter을 = '{D} %';
option.series [0] .label.normal.offset = [80, 0]
option.series.label.emphasis.textStyle.fontSize = 36;
option.series.label.emphasis.textStyle. = fontWeight를 "일반";
-------------------------------------------- --------- 컬러 그리드 선
option.xAxis [0] .splitLine.lineStyle.color = "# FFFFFF ';
-------------------------------------------------- -图例的大小和间距
option.legend.itemWidth = 40;
option.legend.itemHeight = 40;
option.legend.itemGap = 40;
option.legend.icon = '라인';
option.legend.padding = [0,0,0,0]
option.legend.formatter = 함수 (PARAMS) {
창 "{타이틀 | ' + PARAMS + "} {값 |" + (objData [PARAMS] .value) + "} {타이틀 |项}";
};
----------------------------------------------图例位置
옵션을 선택합니다. legend.top = "100 픽셀";
option.legend.padding = [50, 0, 0, 445];
option.legend.left = '자동';
option.legend.right = 40;
option.legend.top = 5;
option.legend.selectedMode = 거짓;
-------------------------------------------------- - 중간 노드 라인 그래프 아이콘
option.series [0] = .symbol '원 '// 것도 취소되지 않은 노드
option.series [0] = 10 .symbolSize,
------------- --------------------------- 히스토그램 데이터 태그
option.series [0] .label.normal.offset = [80 , 0] ;
option.series [0] = .label.normal.formatter '{C} %';
----------------------------- ----------- 히스토그램 칼럼
option.series [0] = .barGap '10 % ';
option.series [0] .barWidth = "15 %",
[. 1] option.series. barWidth = "15 %",
----------------------------------------- 레이더도. 배경 눈금 속성
option.radar.splitNumber = 4;.
option.radar.splitArea = 쇼 : false로 {}
option.radar.splitLine.lineStyle = {
색상 : '#의 175E4B'
};
------------------------------------------- 레이더 차트 다섯 각도 속성
= {option.radar.name
{텍스트 스타일
'#FFFFFF'색상
20}, 상기 fontSize는이
}
------------------------ -------------------- 레이더 차트 콘텐츠 속성
option.series.itemStyle.normal.color = '# 26F091';
option.radar.center = '50 % ', '55 %가']
option.xAxis [0] = 20가 .axisLabel.margin이다
option.yAxis [0] = 20 .axisLabel.margin;
---------------- -------------------------------------- X, Y 축이 제공된다
option.yAxis [0]. axisLabel.formatter = '{값} %';
option.yAxis [0] = 0 .nameRotate;
option.yAxis [0] = .nameTextStyle.padding은 [0,0,0,0], 오른쪽 및 왼쪽 하단