본문 바로가기
study/javascript

ECharts 그래프 별 색깔 다르게

by 땅콩잉 2021. 9. 23.
728x90

echart로 각 데이터 바 색을 다르게 하는 방법.

이런 식으로 나오게 하고 싶을때 사용한다.

 

itemStyle 을 사용

var option = {
    grid: {
    left: '1%',
    right: '2%',
    bottom: '3%',
    containLabel: true
},

tooltip : {
   trigger: 'axis'
},

toolbox: {
  show : true,
feature : {

magicType : {show: true, type: ['line', 'bar']},
restore : {show: false},
saveAsImage : {show: true}
}
},
color: ["#009efb", "#75ae5d"],
calculable : true,
xAxis : [{type : 'category',
data : aMallName}
],
yAxis : [
{type : 'value'}],
series : [
{
name:'접속 수',
type:'bar',
data: [
{value:'12',itemStyle:{color:"#000"}},
{value:'14',itemStyle:{color:"#5891b0"}},
{value:'15',itemStyle:{color:"#dba090"}},

],
markPoint : {
data : [
    {type : 'max', name: 'Max'},
    {type : 'min', name: 'Min'}]},
}]
};

 

핵심은 볼드체로 된 곳.

댓글