ECharts チュートリアル (詳細)
非常に包括的な ECharts チュートリアル、非常に包括的な ECharts チュートリアル、現在の線/ノードの色、線の太さ、線のスタイル、線の影、線のスムージング、線ノードのサイズ、線ノードの影、線ノードの境界線、線ノードの境界線の影、ツール リマインダー、ツール リマインダースタイル、ツールカスタムリマインダー、ツールリマインダーの背景、ツールリマインダーの境界線、ツールリマインダーの影、ツールリマインダーのテキストスタイル、ツールボックス、ツールボックスアイコン、ツールボックスのタイトル、ツールボックスの機能、カテゴリ表示、カテゴリ表示位置、カテゴリ表示アイコン、カテゴリ表示アイコンのサイズ、カテゴリ表示アイコンの間隔、カテゴリ表示、カテゴリ表示位置、カテゴリ表示アイコン、カテゴリ表示アイコンのサイズ、カテゴリ表示アイコンの間隔、カテゴリ表示アイコンの文字サイズ、カテゴリ表示アイコンの文字色、軸方向など。ショートカット キーは 40 個までです。
使用中のほとんどのシナリオに簡単に対応できます。時間の都合上、この記事は全文の10%のみを更新します。次回も引き続き更新します。 ECharts はよく使われるツールですが、渋い API が人々を混乱させることがよくあります。使用中に問題をすぐに見つけて解決できるよう、コピーを保管しておくことをお勧めします。
これらのコンテンツには、echart を理解するための一定の基本知識が必要です。https://echarts.apache.org/examples/zh/editor.html?c=line-simpleにアクセスし、チュートリアルに従ってオンラインで学習できます。
記事ディレクトリ
- ECharts チュートリアル (詳細)
-
- 1: 線/ノードの色
- 2:線の太さ
- 3: 線のスタイル
- 4: ラインシャドウ
- 5: 滑らかなライン
- 6: ラインノードのサイズ
- 7: ラインノードシャドウ
- 8: ラインノードの境界線
- 9: ラインノード境界影
- 10: ツールリマインダー
- 11: ツールリマインダーのスタイル
- 12: ツールのカスタマイズのリマインダー
- 13: ツールリマインダーの背景
- 14: ツールリマインダーの境界線
- 15: ツールリマインダーシャドウ
- 16: ツールリマインダーのテキストスタイル
- 17: ツールボックス
- 18: ツールボックスアイコン
- 19: ツールボックスのタイトル
- 20：ツールボックス機能
- 21：カテゴリー表示
- 22：カテゴリー表示位置
- 23：カテゴリー表示アイコン
- 24：カテゴリー表示アイコンサイズ
- 25: カテゴリ表示アイコンの間隔
- 26: カテゴリ表示アイコンの文字サイズ
- 27: カテゴリ表示アイコンの文字色
- 28: 軸方向(ヒストグラム等他と同様)
- 29: 座標軸名
- 30: 座標軸名位置
- 31: 座標軸名の文字スタイル
- 32: 座標軸名と軸間の距離
- 33: 表示ラベル
- 34: ラベル位置
- 35: ラベルのテキストのスタイル
- 36: ラベルの背景色
- 37: ラベル枠
- 38: ラベル枠の角丸
- 39: ラベルのパディング
- 40: ラベルシャドウ
- 41: ラベルの回転
- 42: X 軸コンテンツのオフセット
- 43: X 軸のコンテンツ スタイル
- 44: 継続的に更新中...
1: 線/ノードの色
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF'
}
}
},
}
]
2:線の太さ
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
width: 3
}
}
},
}
]
3: 線のスタイル
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
width: 3,
type: 'dashed'
}
}
},
}
]
4: ラインシャドウ
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
width: 3,
type: 'dashed',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetY: 10
}
}
},
}
]
5: 滑らかなライン
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
width: 3,
type: 'dashed',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetY: 10
}
}
},
}
]
6: ラインノードのサイズ
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
}
}
},
}
]
7: ラインノードシャドウ
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
areaStyle: {
color: 'rgba(0, 0, 0, 0.5)'
}
}
},
}
]
8: ラインノードの境界線
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
borderColor: '#409EFF',
borderWidth: 5
}
},
}
]
9: ラインノード境界影
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
borderColor: '#409EFF',
borderWidth: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetY: 10
}
},
}
]
10: ツールリマインダー
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis'
},
}
]
11: ツールリマインダーのスタイル
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
formatter: '{b}<br />{a}: {c}'
},
}
]
12: ツールのカスタマイズのリマインダー
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].name + '<br /><span style="color:#409EFF">hello world<span>'
}
},
}
]
13: ツールリマインダーの背景
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
backgroundColor: '#E6A23C'
},
}
]
14: ツールリマインダーの境界線
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
borderColor: '#409EFF',
borderWidth: 15
},
}
]
15: ツールリマインダーシャドウ
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetY: 10
},
}
]
16: ツールリマインダーのテキストスタイル
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
normal: {
color: '#E6A23C',
lineStyle: {
color: '#409EFF',
},
}
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#409EFF',
fontSize: 20
}
},
}
]
17: ツールボックス
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
18: ツールボックスアイコン
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
saveAsImage: {
icon: 'image://https://img.88icon.com/download/jpg/202001/388cc11b509232e7b5a2340742aba2ef.jpg!88con'
}
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
19: ツールボックスのタイトル
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
saveAsImage: {
title: '保存为图片'
}
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
20：ツールボックス機能
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
dataZoom: {
},
dataView: {
readOnly: false},
magicType: {
type: ['line', 'bar']},
restore: {
},
saveAsImage: {
}
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
21：カテゴリー表示
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
22：カテゴリー表示位置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
left: 'right'
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
23：カテゴリー表示アイコン
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
icon: 'circle'
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
24：カテゴリー表示アイコンサイズ
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
icon: 'circle',
itemWidth: 20,
itemHeight: 20
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
25: カテゴリ表示アイコンの間隔
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
icon: 'circle',
itemGap: 20
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
26: カテゴリ表示アイコンの文字サイズ
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
icon: 'circle',
textStyle: {
fontSize: 20
}
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
27: カテゴリ表示アイコンの文字色
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
icon: 'circle',
textStyle: {
color: 'red'
}
},
series: [
{
name:'Mon',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
name:'Tue',
data: [50, 30, 24, 18, 35, 47, 60],
type: 'line'
}
]
};
28: 軸方向(ヒストグラム等他と同様)
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
29: 座標軸名
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: '我是Y轴名称'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
30: 座標軸名位置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: '我是Y轴名称',
nameLocation: 'middle'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
31: 座標軸名の文字スタイル
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: '我是Y轴名称',
nameTextStyle: {
color: 'red',
fontSize: 20
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
32: 座標軸名と軸間の距離
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: '我是Y轴名称',
nameGap: 20
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
33: 表示ラベル
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true
}
}
]
};
34: ラベル位置
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
position: 'left'
}
}
]
};
35: ラベルのテキストのスタイル
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
position: 'left',
textStyle: {
color: 'red',
fontSize: 20
}
}
}
]
};
36: ラベルの背景色
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
textStyle: {
color: 'red',
fontSize: 20
},
backgroundColor: 'yellow'
}
}
]
};
37: ラベル枠
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
borderColor: 'blue',
borderWidth: 2
}
}
]
};
38: ラベル枠の角丸
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
borderRadius: 10
}
}
]
};
39: ラベルのパディング
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
borderColor: 'blue',
borderWidth: 5,
borderRadius: 10,
padding: 10
}
}
]
};
40: ラベルシャドウ
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
borderColor: 'blue',
borderWidth: 1,
padding: 10,
shadowColor: 'red',
shadowBlur: 10,
shadowOffsetX: 1,
shadowOffsetY: 1
}
}
]
};
41: ラベルの回転
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {
show: true,
rotate: 45
}
}
]
};
--------2013 04 13更新----------
42: X 軸コンテンツのオフセット
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0,
rotate: 40
}
}
43: X 軸のコンテンツ スタイル
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: 'red'
}
}
},
44: 継続的に更新中...
名前が不適切な場合、またはここに含まれていないコンテンツに遭遇した場合は、メッセージを残してください。迅速に更新します。
現時点では、より一般的に使用される部分のみが更新されており、今後も更新され続ける予定です。