EChart 차트 영역 별로 각각 배경 색 지정(markArea)

일단 a라는 체크박스, b라는 체크박스 총 체크박스 두개가 있을 때, 해당 체크박스가 체크될 때마다 실행되는 updateChartOptions 라는 함수를 만들었다.

해당 함수에선 ECahrt의 markArea라는 속성을 사용하여, 두 체크박스 모두 체크될 경우, 체크가 해제된 경우 등을 고려하여 값을 넣어준다.

 

  updateChartOptions (v) { // echart의 options 업데이트
      this.options.series.length = 0 // 리셋

      const data = JSON.parse(JSON.stringify(this.chartData)) // 차트에 들어가야 하는 데이터

      data.forEach((series) => {
        const markAreaData = [] // 체크박스값에 따라 값을 넣어줄 빈 배열 생성
        const markAreaItemStyleA = { // 원하는 색 1 설정
          color: 'red'
        }
        const markAreaItemStyleB = { // 원하는 색 2 설정
          color: 'green'
        }

        if (this.aChecked) { // aChecked 값 true일 때
          const markAreaDataA = [] // a 체크박스 체크되면 해당 빈 배열에 값이 들어감
          markAreaDataA.push({ // a 구간의 시작점
            name: 'a영역', // 영역 명
            xAxis: series.aStart, // a 구간이 시작되는 X 좌표 값
            itemStyle: markAreaItemStyleA
          })
          markAreaDataA.push({ // a 구간의 끝점
            xAxis: series.aEnd, // a 구간이 끝나는 X 좌표 값
            itemStyle: markAreaItemStyleA
          })
          if (markAreaDataA.length > 0) { // a 체크박스에 체크되어 해당 배열에 값이 있으면
            markAreaData.push(markAreaDataA) // 값 넣기
          }
        }

        if (this.bChecked) { // bChecked 값 true일 때
          const markAreaDataB = [] // a와 동일
          markAreaDataB.push({
            name: 'b영역',
            xAxis: series.bStart,
            itemStyle: markAreaItemStyleB
          })
          markAreaDataB.push({
            xAxis: series.bEnd,
            itemStyle: markAreaItemStyleB
          })
          if (markAreaDataB.length > 0) { // 역시 b 체크박스가 체크되어 위에서 값이 들어가면
            markAreaData.push(markAreaDataB) // 배열에 값을 넣어줌(두 체크박스가 모두 체크 된 경우, 하나만 체크된 경우 등을 위해 분리)
          }
        }

        this.options.series.push({
          name: series.name,
          type: 'line',
          data: series.data,
          itemStyle: {
            emphasis: {
              color: 'red',
              borderColor: 'red',
              borderWidth: 5
            },
            color: series.color
          },
          markArea: {
            silent: true,
            itemStyle: {
              opacity: 0.5
            },
            data: markAreaData
          }
        })
      })

      this.$nextTick(() => {
        // ECharts 차트 인스턴스를 참조하는 Ref를 사용하여 차트 업데이트
        this.$refs.echart.chart.clear()
        this.$refs.echart.chart.setOption(this.options)
      })
    },