[eCharts] 데이터 포인트별 마크 모양 다르게 하기

사용법

markpoint 옵션 사용

기본적으로 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 의 모양 사용 가능하며, 이미지로도 설정 가능

 

 

• coord : [x-axis값, y-value값]
• symbol : 마크 모양
• symbolSize :  마크 크기
• symbolRotate : 마크 회전 각도 (화살표와 같은 마크에서 필요한 옵션)
• itemStyle - color : 마크 색 지정 

 

예시

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true,
              markPoint:{
                data: [
                  {
                    name: 'one data',
                    coord: [1, 932],
                    symbol: 'circle',
                    symbolSize: 20,
                    symbolRotate: 180,
                    itemStyle: {
                      color: 'red'
                    } 
                  },
                  {
                    name: 'one data',
                    coord: [2, 901],
                    symbol: 'rect',
                    symbolSize: 20,
                    symbolRotate: 180,
                    itemStyle: {
                      color: 'blue'
                    } 
                  },
                  {
                    name: 'one data',
                    coord: [3, 934],
                    symbol: 'diamond',
                    symbolSize: 20,
                    symbolRotate: 180,
                    itemStyle: {
                      color: 'green'
                    } 
                  },
                  {
                    name: 'one data',
                    coord: [4, 1290],
                    symbol: 'roundRect',
                    symbolSize: 20,
                    symbolRotate: 180,
                    itemStyle: {
                      color: 'orange'
                    } 
                  },
                  {
                    name: 'one data',
                    coord: [5, 1330],
                    symbol: 'triangle',
                    symbolSize: 20,
                    symbolRotate: 0,
                    itemStyle: {
                      color: 'black'
                    } 
                  },
                  
                ]
              }
            }
  ]
};

공식사이트 참고

Documentation - Apache ECharts