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'}]},
}]
};
핵심은 볼드체로 된 곳.
'study > javascript' 카테고리의 다른 글
jquery,javascript select option 변경 (0) | 2021.10.13 |
---|---|
jquery select2 change (0) | 2021.09.28 |
jquery 특정영역으로 scroll하기 (0) | 2021.09.15 |
javascript, jquery 이미지 미리보기(preview image) (0) | 2021.09.15 |
session storage, local storage사용하기 (0) | 2021.09.14 |
댓글