chart.legend({,chartlegend

本文目錄一覽：

• 1、設置兩個chart.legend.position會覆蓋嗎
• 2、Echarts中legend屬性使用的方法詳解
• 3、Echarts legend屬性使用

設置兩個chart.legend.position會覆蓋嗎

這裡將針對highcharts圖表組件內的圖例legend展開講述，圖例的顯示位置調整，亮瞎你的雙眼！

一、將圖例Legend放於圖表右側

1、設置chart的marginRight屬性值

chart: {

marginRight: 120

},

2、設置legend圖例屬性值如下

legend: {

align: ‘right’, //水平方向位置

verticalAlign: ‘top’, //垂直方向位置

x: 0, //距離x軸的距離

y: 100 //距離Y軸的距離

},

3、效果圖如下：

二、將圖例放於圖表左上角

1、設置legend的屬性

legend: {

align: ‘left’, //水平方向位置

verticalAlign: ‘top’, //垂直方向位置

x: 0, //距離x軸的距離

y: 0 //距離Y軸的距離

},

2、效果圖如下：

三、將圖例放於圖表上方中央

1、設置legend屬性如下

legend: {

align: ‘center’, //水平方向位置

verticalAlign: ‘top’, //垂直方向位置

x: 0, //距離x軸的距離

y: 20 //距離Y軸的距離

},

2、效果圖如下：

四、將圖例放於下方中央

1、設置legend屬性如下

legend: {

align: ‘center’, //水平方向位置

verticalAlign: ‘bottom’, //垂直方向位置

x: 0, //距離x軸的距離

y: 0 //距離Y軸的距離

},

Echarts中legend屬性使用的方法詳解

目錄orientx/y(left/top)樣式設置itemGapitemHeighttextStyleselecteddata補充：自定義legend屬性總結Echarts的legend屬性是對圖例組…

Echarts的legend屬性是對圖例組件的相關配置

而legend就是Echarts圖表中對圖形的解釋部分：

其中legend自身常用的配置屬性如下：

設置圖例的朝向

屬性值：

設置圖例在X軸方向上的位置以及在Y軸方向上的位置

例子：

注意：邊框寬度和內邊距屬性值為數值，不加單位。

控制每一項的間距，也就是圖例之間的距離屬性值為數值，不帶單位

控制圖例圖形的高度屬性值為數字，不加單位

設置圖例文字樣式屬性值為一個對象

設置圖例的某個選項的數據默認是顯示還是隱藏。

false: 隱藏

屬性值：對象，屬性值內容：圖例上的數據與boolean構成鍵值對

如果某選項設置為false，那麼圖標上的數據也會默認不顯示，而圖例會以灰色樣式顯示

圖例上顯示的文字信息，如果不設置該項，默認會以series設置的信息作為圖例信息。如果設置該項， 必須與series設置的信息一致 ，才會生效。

而該屬性的作用：可以單獨對圖例中某個選項進行單獨設置樣式

比如：

以上單獨設置中

name:指定該項的名稱，必填

icon:指定圖例項的icon，可以為內置的圖形7個圖形，或者自定義圖標的形式： ‘image://url’

textStyle:：設置文本樣式

實現效果

到此這篇關於Echarts中legend屬性使用的文章就介紹到這了,更多相關Echarts legend屬性使用內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支持我們！

Echarts legend屬性使用

Echarts的legend屬性是對圖例組件的相關配置

而legend就是Echarts圖表中對圖形的解釋部分：

其中legend自身常用的配置屬性如下：

設置圖例的朝向

屬性值：

設置圖例在X軸方向上的位置以及在Y軸方向上的位置

例子：

注意：邊框寬度和內邊距屬性值為數值，不加單位。

控制每一項的間距，也就是圖例之間的距離

屬性值為數值，不帶單位

控制圖例圖形的高度

屬性值為數字，不加單位

設置圖例文字樣式

屬性值為一個對象

設置圖例的某個選項的數據默認是顯示還是隱藏。

false: 隱藏

屬性值：對象，屬性值內容：圖例上的數據與boolean構成鍵值對

如果某選項設置為false，那麼圖標上的數據也會默認不顯示，而圖例會以灰色樣式顯示

圖例上顯示的文字信息，如果不設置該項，默認會以series設置的信息作為圖例信息。如果設置該項， 必須與series設置的信息一致 ，才會生效。

而該屬性的作用：可以單獨對圖例中某個選項進行單獨設置樣式

比如：

以上單獨設置中

name:指定該項的名稱，必填

icon:指定圖例項的icon，可以為內置的圖形7個圖形，或者自定義圖標的形式： ‘image://url’

textStyle:：設置文本樣式