728x90
반응형
position: 'right'로 설정했을 때 기본적으로 레이블은 프린터의 연결 표시입니다.
라벨을 더 오른쪽으로 이동하려면 offset속성을 추가하여 위치를 확보할 수 있습니다.
offset은 [x, y]형식의 배열 값을 무시하고,
첫 번째 값은 x축 방향(가로) 이동 거리, 두 번째 값은 y축 방향(세로) 이동 거리를 의미합니다.
양수 값은 오른쪽/아래로, 음수 값은 왼쪽/위로 이동합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Horizontal Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
#main {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
// DOM 요소를 선택하여 ECharts 인스턴스를 초기화
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 차트 옵션 설정
var option = {
title: {
text: '가로 막대 차트 (Label 위치 조정)',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2023', '2024'],
top: '10%'
},
grid: {
left: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['1월', '2월', '3월', '4월', '5월', '6월'],
inverse: true
},
series: [
{
name: '2023',
type: 'bar',
data: [120, 200, 150, 80, 70, 110],
itemStyle: {
color: '#5470C6'
},
label: {
show: true,
position: 'inside',
formatter: '{c}',
color: '#fff'
}
},
{
name: '2024',
type: 'bar',
data: [90, 160, 200, 130, 150, 190],
itemStyle: {
color: '#91CC75'
},
label: {
show: true,
position: 'right',
offset: [20, 0], // x축 방향으로 20px 오른쪽 이동
formatter: '{c}',
color: '#333'
}
}
]
};
// 옵션을 차트에 적용
myChart.setOption(option);
</script>
</body>
</html>728x90
반응형
'Front > JS & jQuery' 카테고리의 다른 글
| 크롤링 (0) | 2025.02.03 |
|---|---|
| [js][Echarts] x축 라벨 위치 조정 / margin (0) | 2025.01.30 |
| [js][Echarts] label 위치 수정 / position (0) | 2025.01.28 |
| [js][Echarts] 가로 bar 차트에서 y 축 데이터 순서 변경하는 법 / inverse (0) | 2025.01.27 |
| [JAVA] Stream은 순서를 지키지 않나요 ? (0) | 2025.01.22 |