ProgrammingEcharts

ECharts 바차트 색상 변경!

Echarts, echart, echart 한글, echarts bar chart color, echarts 바 차트 색상, echarts 색상, echarts 한글, 이차트

Echarts 바차트 색상 변경

오늘은 여러가지 색상으로 표현된 바차트를 그려보겠습니다. 혹시 Echarts 에 관해 잘 모르신다면 ECharts를 통해 5분안에 차트를 만들자!을 통해 기본적으로 만드는 법을 아셔도 좋습니다.

Echarts를 통해 차트를 그리면 기본적으로 1가지 시르즈에 1가지 색상으로만 표현 할 수 있습니다.
그리고 색상을 정하지 않아도 기본적으로 Echarts의 기본 색상열을 통해 차트의 색상이 변합니다.

Echarts 기본 색상

색상은 기본적으로 11가지가 준비되어 있습니다. (이미지는 클릭하면 크게 확인할 수 있습니다.)
['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

그 중 5가지만 눈으로 색을 확인해 보자면 아래와 같습니다.

Echarts 앞의 5가지 기본 색상을 눈으로 확인

차트 색상 임의로 변경하기

위의 기본색상 말고 다른 색상으로 변경하고 싶으시다면 series[i]-bar.itemStyle.color를 변경하시면 됩니다.
색상 설정은 ‘blue’, ‘red’처럼 영어색으로 변경하셔도 되고, Hex색상인 ‘#626A8E’ 형식을 사용하셔도 됩니다.
아래의 예시로 확인해보시죠.

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
<div id="chart1" style="width:600px;height:400px;"></div>

<script>
	var myChart1 = echarts.init(document.getElementById('chart1'));

    var option1 = {
        xAxis: {
            type: 'category',
            data: ['A', 'B']
        },
        yAxis: {
            type: 'value'
        },
        tooltip:{},
        series: [{
            data: [120, 200],
            type: 'bar',
            //아래의 itemStyle.color를 통해 차트의 색상을 변경할 수 있습니다.
            itemStyle:{
                color: '#626A8E',
            },
        }]
    };

    myChart1.setOption(option1);

</script>

하지만 만약에 A와 B의 색상을 다르게 변경하고 싶다면 어떻게 해야할까요??
바로 아래처럼 설정하면 하나의 시리즈 안에서로 다른 색상을 포현할 수 있습니다.

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
var myChart2 = echarts.init(document.getElementById('chart2'));

   option2 = {
       xAxis: {
           type: 'category',
           data: ['A', 'B']
       },
       yAxis: {
           type: 'value'
       },
       tooltip:{},
       series: [{
           data:[ {
               value: 120,
               itemStyle: {color: 'blue'},
           },
           {
               value: 200,
               itemStyle: {color: 'red'},
           }],
           //위의 data를 2개로 분리하여 색상을 다르게 설정할 수 있습니다.
           type: 'bar',
       }]
   };

	myChart2.setOption(option2);

자 위와 같이 설정하면 차트의 색상을 원하는대로 변경할 수 있습니다.
원하는 결과 얻고 가시길 빌어요!

Reference

Share