矩形の1構成図番号は、その後、ツリーマップに入力パイを取る直接配置されています。
変更の種類
option.series.type = 'ツリーマップ';
閉じるパン粉
option.series.breadcrumb = falseは、
クローズアップに移動するには、マウスの効果をカバーする
option.series.hoverAnimationを=偽;
プロンプトオフに
偽= option.tooltip.showを、
ヒストグラムをクリックし閉じノードイベント
option.series.nodeClick =偽;
マウスの応答イベントオフに
偽= option.series.silentを。
マウスホイールのイベントをオフに
=偽option.series.roamを。
ピッチ幅は、いくつかの図面との間に設けられています
option.series.itemStyle = {正常：{gapWidth：1、} }。
チャートラベルは、文字位置の内側に配置します
option.series.data [I] .LABEL = { 位置：[3 '％'、3 '％']}。
内部に図勾配
{（; J <option.series.data.length J ++ VAR J = 0）のための
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]
}、
}。
}
ラベルのテキストは、ここで直接変更+ミスがあるだろう、これだけの文字列の連結を組み立てるために使用することができます
option.series.label.normal = {
リッチ：{
左：{
整列：、 '左'
}
}、
フォーマッタ：関数（A）{
agf.push（a.dataIndex）。
VAR sumData = 0;
{（; iはoption.series.data.lengthを<I ++がVAR I = 0）ため
sumData + = option.series.data [I] .VALUE。
}
VARのPERC =新しい番号（（a.value / sumData）* 100）。
STR = '{名前|';
'百万元を'、str.concat（a.nameを返す'} \ n \ n'は、perc.toFixed（2）、 '％'、 '\ n \ nは¥'、fmoney（a.value、2） ）;
}
}。
次のような効果があります
2. x軸データの特定の順序配列（つまり、取得したデータは、その後され得るでグループに、インデックス番号をソートするために）
option.series dataSer = VAR [0] .dataの、
VAR dataSer1 option.series = .dataの[1]; //私はこれらの2つのシリーズの2セットを持って、彼または直接循環応じて取得することができ
VAR DATAX =オプションを選択します。 XAXIS [0] .DATA;
VAR sortArr = [「2017第4四半期」、「2018の第一四半期」「2018の第二四半期」「2018年度第3四半期」「2018第4四半期『』 2019年の""第二四半期"" 2019年第3四半期「] 2019年の第一四半期、
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.過度のテキストの折り返し（私はここにある行は5つの単語です）
用（VAR i = 0; I <option.xAxis [0] .data.length; iは++）{
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＃"、 "＃1 089CFE"、 "＃1 089CFE"、 "＃1 089CFE"、 "＃1 089CFE"、 "＃1 74EFFF"]; 戻りcolorList [params.dataIndex]; } }
-------------------------------------------------- ------カラム勾配
option.series [0] = {.itemStyle
ノーマル：{
色：新しい新しいecharts.graphic.LinearGradient（
0、0、0、。1、[{
オフセット：0、
色：「＃06B5D7 '
}、
{
オフセット:. 1、
カラー：' ＃1 1E3FF7 '
}
]）
}
}。
-------------------------------------------------- --------------------------柱子渐变加不同色
option.series [0] .itemStyle = {
正常：{
色：機能（paramsは） {
VARのcolorList = [ 'RGB（120186247）'、 'RGB（98132227）']、[ 'RGB（229,90,67）'、 'RGB（183,52,20）']、[ 'RGB（255176 、35）」、 'RGB（228,151,23）']、[ 'RGB（33247183）'、 'RGB（12181133）']]。
VAR指数= params.dataIndex。
IF（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を; //選択効果
偽= 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 = "100pxに";
option.legend.padding = [50、0、0、445]。
option.legend.left = '自動';
option.legend.right = 40;
option.legend.top = 5;
option.legend.selectedMode = falseは、
-------------------------------------------------- -中間ノードの線グラフアイコン
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 = {
色： '＃1 175E4B'
}。
-------------------------------------------レーダーチャート5つの角度特性は、
{= option.radar.name
：{TEXTSTYLE
色： '#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]、左右下部