Echarts学習計のコンポーネント---タイトル(title)
12266 ワード
Echartsラーニングメータのコンポーネント-タイトル(title)
次は、「titleテキスト」の基本構成項目です.
コンフィギュレーション・アイテム
コメント
show:true
デフォルト値true、オプション:true(表示)/false(非表示)
text:‘メインタイトル’
メインタイトルテキスト、''改行を指定
link:’ ’
メインタイトルテキストハイパーリンク、デフォルトtrue
target: null
指定ウィンドウメインタイトルハイパーリンクを開き、「self」/「blank」をサポートし、「blank」と同等に指定しない(新しいウィンドウ)
subtext:「サブタイトル」
サブタイトルテキスト、''は改行を指定します.
sublink: ’ ’
サブタイトルテキストハイパーリンク
subtarget: null
指定ウィンドウはサブタイトルハイパーリンクを開き、「self」/「blank」をサポートし、「blank」と同等に指定しない(新しいウィンドウ)
次は-titleスタイル-の基本構成項目です.
コンフィギュレーション・アイテム
コメント
textAlign
全体(textとsubtextを含む)の水平位置合わせ.オプション:「auto」、「left」、「right」、「center」.
textVerticalAlign
全体(textとsubtextを含む)の垂直位置合わせ.オプション:「auto」、「top」、「bottom」、「middle」.
triggerEvent
イベントをトリガーするかどうか.
padding = 5
タイトル内の余白、単位px、デフォルトの各方向内の余白は5で、配列を受け入れてそれぞれ上下の左の余白を設定します.
itemGap = 10
メインサブタイトル間の間隔.
zlevel:0
すべてのグラフィックのzlevel値.
z = 2
コンポーネントのすべてのグラフィックのz値.図の前後の順序を制御します.z値の小さいグラフィックは、z値の大きいグラフィックで上書きされます.zはzlevelより優先度が低く、新しいCanvasは作成されません.
left = ‘auto’
titleコンポーネントのコンテナ左側からの距離は、leftの値が20のような具体的な画素値であってもよく、「20%」のようにコンテナに対して幅の高い割合であってもよく、「left」、「center」、「right」であってもよい.leftの値が「left」、「center」、「right」の場合、コンポーネントは対応する位置に応じて自動的に整列します.
top = ‘auto’
titleアセンブリは容器の上側からの距離です.topの値は、20のような具体的な画素値であってもよく、「20%」のように容器に対して幅の高い割合であってもよいし、「top」、「middle」、「bottom」であってもよい.topの値が「top」、「middle」、「bottom」の場合、コンポーネントは対応する位置に応じて自動的に整列します.
right = ‘auto’
titleアセンブリは容器の右側からの距離です.rightの値は、20のような特定の画素値であってもよく、「20%」のように容器に対して幅の高い割合であってもよい.デフォルトの適応.
backgroundColor = ‘transparent’
タイトルの背景色、デフォルトは透明です.色はRGBで表すことができ、例えば「rgb(128,128,128),128」、alphaチャネルを追加したい場合は「rgba(128,128,128,128,0.5)」などのRGBAを使用してもよいし、「ccc」などの16進数フォーマットを使用してもよい
borderColor: ‘#ccc’
タイトルの枠線の色.サポートされている色のフォーマットはbackgroundColorと同じです.
borderWidth:0
見出しの枠線の幅.
borderRadius: 0
フィレット半径、単位px、入力配列がそれぞれ4つのフィレット半径を指定することをサポートします.例えば:borderRadius:5,//四隅のフィレットサイズを統一して設定borderRadius:[5,5,0,0]//(時計回り左上,右上,右下,左下)
shadowBlur
グラフィックシャドウのブラーサイズ.このアトリビュートは、shadowColor、shadowOffsetX、shadowOffsetYとともにグラフィックのシャドウ効果を設定します.例:{shadowColor:‘rgba(0,0,0,0.5)’,shadowBlor:10}注意:この構成項目が有効になる前提はshow:trueおよびtranparentの値を持たないバックグラウンド色backgroundColorが設定されていることです.
shadowColor
影の色.サポートされているフォーマットはcolorと同じです.注:この構成項目が有効になる前提は、show:trueが設定されていることです.
shadowOffsetX:0
シャドウの水平方向のオフセット距離.注:この構成項目が有効になる前提はshow:trueが設定されていることです.
shadowOffsetY:0
シャドウの水平方向のオフセット距離.注:この構成項目が有効になる前提は、show:trueが設定されていることです.
注意:zlevelはCanvas階層に使用され、異なるzlevel値のグラフィックが異なるCanvasに配置されます.Canvas階層は一般的な最適化手段です.アニメーションなどのグラフィックの変化が頻繁なコンポーネントを個別のzlevelに設定できます.注意が必要なのは、Canvasが多すぎるとメモリのオーバーヘッドが増大し、携帯電話側ではクラッシュを防ぐために慎重に使用する必要があることです.
zlevelの大きいCanvasはzlevelの小さいCanvasの上に置かれます.
html内のエンティティの例を次に示します.
次は、「titleテキスト」の基本構成項目です.
コンフィギュレーション・アイテム
コメント
show:true
デフォルト値true、オプション:true(表示)/false(非表示)
text:‘メインタイトル’
メインタイトルテキスト、''改行を指定
link:’ ’
メインタイトルテキストハイパーリンク、デフォルトtrue
target: null
指定ウィンドウメインタイトルハイパーリンクを開き、「self」/「blank」をサポートし、「blank」と同等に指定しない(新しいウィンドウ)
subtext:「サブタイトル」
サブタイトルテキスト、''は改行を指定します.
sublink: ’ ’
サブタイトルテキストハイパーリンク
subtarget: null
指定ウィンドウはサブタイトルハイパーリンクを開き、「self」/「blank」をサポートし、「blank」と同等に指定しない(新しいウィンドウ)
次は-titleスタイル-の基本構成項目です.
コンフィギュレーション・アイテム
コメント
textAlign
全体(textとsubtextを含む)の水平位置合わせ.オプション:「auto」、「left」、「right」、「center」.
textVerticalAlign
全体(textとsubtextを含む)の垂直位置合わせ.オプション:「auto」、「top」、「bottom」、「middle」.
triggerEvent
イベントをトリガーするかどうか.
padding = 5
タイトル内の余白、単位px、デフォルトの各方向内の余白は5で、配列を受け入れてそれぞれ上下の左の余白を設定します.
itemGap = 10
メインサブタイトル間の間隔.
zlevel:0
すべてのグラフィックのzlevel値.
z = 2
コンポーネントのすべてのグラフィックのz値.図の前後の順序を制御します.z値の小さいグラフィックは、z値の大きいグラフィックで上書きされます.zはzlevelより優先度が低く、新しいCanvasは作成されません.
left = ‘auto’
titleコンポーネントのコンテナ左側からの距離は、leftの値が20のような具体的な画素値であってもよく、「20%」のようにコンテナに対して幅の高い割合であってもよく、「left」、「center」、「right」であってもよい.leftの値が「left」、「center」、「right」の場合、コンポーネントは対応する位置に応じて自動的に整列します.
top = ‘auto’
titleアセンブリは容器の上側からの距離です.topの値は、20のような具体的な画素値であってもよく、「20%」のように容器に対して幅の高い割合であってもよいし、「top」、「middle」、「bottom」であってもよい.topの値が「top」、「middle」、「bottom」の場合、コンポーネントは対応する位置に応じて自動的に整列します.
right = ‘auto’
titleアセンブリは容器の右側からの距離です.rightの値は、20のような特定の画素値であってもよく、「20%」のように容器に対して幅の高い割合であってもよい.デフォルトの適応.
backgroundColor = ‘transparent’
タイトルの背景色、デフォルトは透明です.色はRGBで表すことができ、例えば「rgb(128,128,128),128」、alphaチャネルを追加したい場合は「rgba(128,128,128,128,0.5)」などのRGBAを使用してもよいし、「ccc」などの16進数フォーマットを使用してもよい
borderColor: ‘#ccc’
タイトルの枠線の色.サポートされている色のフォーマットはbackgroundColorと同じです.
borderWidth:0
見出しの枠線の幅.
borderRadius: 0
フィレット半径、単位px、入力配列がそれぞれ4つのフィレット半径を指定することをサポートします.例えば:borderRadius:5,//四隅のフィレットサイズを統一して設定borderRadius:[5,5,0,0]//(時計回り左上,右上,右下,左下)
shadowBlur
グラフィックシャドウのブラーサイズ.このアトリビュートは、shadowColor、shadowOffsetX、shadowOffsetYとともにグラフィックのシャドウ効果を設定します.例:{shadowColor:‘rgba(0,0,0,0.5)’,shadowBlor:10}注意:この構成項目が有効になる前提はshow:trueおよびtranparentの値を持たないバックグラウンド色backgroundColorが設定されていることです.
shadowColor
影の色.サポートされているフォーマットはcolorと同じです.注:この構成項目が有効になる前提は、show:trueが設定されていることです.
shadowOffsetX:0
シャドウの水平方向のオフセット距離.注:この構成項目が有効になる前提はshow:trueが設定されていることです.
shadowOffsetY:0
シャドウの水平方向のオフセット距離.注:この構成項目が有効になる前提は、show:trueが設定されていることです.
注意:zlevelはCanvas階層に使用され、異なるzlevel値のグラフィックが異なるCanvasに配置されます.Canvas階層は一般的な最適化手段です.アニメーションなどのグラフィックの変化が頻繁なコンポーネントを個別のzlevelに設定できます.注意が必要なのは、Canvasが多すぎるとメモリのオーバーヘッドが増大し、携帯電話側ではクラッシュを防ぐために慎重に使用する必要があることです.
zlevelの大きいCanvasはzlevelの小さいCanvasの上に置かれます.
html内のエンティティの例を次に示します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title_ </title>
<script src="../static/js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- ECharts （ ） Dom -->
<div id="main" style="width: 1500px;height:1000px;border: 10px solid #79dd2a"
"></div>
<script type="text/javascript">
// dom， echarts
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
//
text: 'Title ', // ，'
'
link: 'https://www.baidu.com/',// , true
target: 'self', //
subtext: ' ',// ，'
'
sublink: 'https://www.baidu.com/',// , true
subtarget: 'blank', //
left: 'center', //title 。
//
textAlign: 'auto', // - ---- ：‘auto’、‘left’、‘right’、‘center’。
textVerticalAlign: 'auto', // - ---- ：‘auto’、‘top’、‘bottom’、‘middle’。
borderWidth: 5, //
borderColor: '#9bff2e', //
backgroundColor: '#2faa97', //
padding: 50,// ， px， 5，
itemGap: 20,// ， px， 10
//
textStyle: {
// {"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 50, //
color: "#aa4539",
fontStyle: 'italic', //
fontWeight: 'lighter', // normal--
},
subtextStyle: {
// {"color": "#aaa"}
fontSize: 20,
color: "#6836aa",
fontStyle: 'normal', //
fontWeight: 'bolder', //
},
zlevel: 0,// 。 0, zlevel canvas， zlevel canvas 。zlevel ，canvas ， zlevel， z 。
z: 6,// ， 6, canvas（ zlevel） z 。
}
};
myChart.setOption(option)
</script>
</body>
</html>