Vue 및 ECharts4Taro3을 사용하여 아름다운 실시간 데이터 모니터링 차트를 만드는 방법

Vue 및 ECharts4Taro3을 사용하여 아름다운 실시간 데이터 모니터링 차트를 만드는 방법

소개:
데이터 분석 및 실시간 모니터링에 대한 수요가 증가함에 따라 실제 데이터의 변화하는 추세와 분석 결과를 표시할 수 있는 간단하고 강력한 방법이 필요합니다. -시간 데이터. Vue와 ECharts4Taro3은 이러한 요구를 매우 잘 충족할 수 있습니다. 이 기사에서는 Vue 및 ECharts4Taro3을 사용하여 아름다운 실시간 데이터 모니터링 차트를 만드는 방법을 소개하고 관련 코드 예제를 제공합니다.

1. 환경 준비
시작하기 전에 몇 가지 필수 종속 항목을 설치해야 합니다. 먼저 Node.js와 npm이 설치되어 있는지 확인하세요. 그런 다음 명령줄에서 다음 명령을 실행하여 Vue 및 ECharts4Taro3을 설치합니다.

npm install -g @vue/cli
vue create my-project
cd my-project
vue add @tarojs/vue
npm install echarts4taro3 @tarojs/taro@3.3.10 @tarojs/cli@3.3.10

2. 실시간 데이터 모니터링 구성 요소 생성
생성된 프로젝트에서 실시간 데이터 모니터링 구성 요소에 대한 코드 작성을 시작할 수 있습니다. 먼저 src/comComponents 폴더 아래에 RealTimeChart.vue라는 파일을 생성한 후 그 안에 다음 코드를 추가합니다.

<template>
  <view class="real-time-chart"></view>
</template>

<script>
import { ecOptions } from './chartOptions'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useEChart } from 'echarts4taro3'

export default {
  setup() {
    const chartInstance = ref(null)

    useEChart(
      chartInstance,
      echarts.init,
      ecOptions
    )

    onMounted(() => {
      chartInstance.value.init()
    })

    return {}
  }
}
</script>

<style>
.real-time-chart {
  width: 100%;
  height: 100%;
}
</style>

이 코드는 Vue 3의 Composition API를 사용하여 구성 요소 상태 및 수명 주기를 관리하는 RealTimeChart라는 구성 요소를 생성합니다. 설정 기능에서는 useEChart를 사용하여 ECharts 차트를 초기화하고 차트 구성을 차트 인스턴스에 바인딩합니다.

3. 구성 차트
이전 단계에서는 ChartOptions라는 구성 개체를 소개했습니다. 동일한 디렉터리에 ChartOptions.js 파일을 생성하고 그 안에 다음 코드를 추가해야 합니다.

export const ecOptions = {
  title: {
    text: '实时数据监控图表'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['数据1', '数据2', '数据3']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数据1',
      type: 'line',
      data: []
    },
    {
      name: '数据2',
      type: 'line',
      data: []
    },
    {
      name: '数据3',
      type: 'line',
      data: []
    }
  ]
}

이 구성 개체에서는 차트의 제목, 프롬프트 정보, 좌표축 등을 정의합니다. 동시에 차트의 계열 데이터도 정의합니다. 여기서는 데이터 1, 데이터 2 및 데이터 3을 예로 사용합니다.

4. 실시간 데이터를 사용하여 차트 업데이트
이전 코드에서는 echarts.init의 세 번째 매개변수 위치에 ecOptions라는 구성 개체를 전달했지만 개체의 데이터 속성은 빈 배열입니다. 다음으로 실시간 데이터로 차트를 업데이트하겠습니다. RealTimeChart 구성 요소의 설정 함수에 다음 코드를 추가합니다.

const { addData } = chartInstance.value

// 模拟1秒钟更新一次数据
setInterval(() => {
  const now = new Date()
  const data1 = Math.random() * 100
  const data2 = Math.random() * 100
  const data3 = Math.random() * 100

  addData([
    [0, data1],
    [1, data2],
    [2, data3],
  ])

  chartInstance.value.setOption({
    xAxis: {
      data: [now.getHours(), now.getMinutes(), now.getSeconds()]
    }
  })
}, 1000)

이 코드는 매초 데이터를 업데이트하도록 타이머를 설정합니다. addData 메소드를 통해 차트에 새 데이터 포인트를 추가하고 setOption 메소드를 통해 가로좌표 데이터를 업데이트합니다.

5. 실시간 데이터를 사용하여 차트 모니터링
이제 다른 구성 요소에서 RealTimeChart 구성 요소를 사용하여 실시간 데이터를 표시할 수 있습니다. App.vue 파일에 다음 코드를 추가하세요:

<template>
  <view class="container">
    <real-time-chart></real-time-chart>
  </view>
</template>

<script>
import RealTimeChart from './components/RealTimeChart'

export default {
  components: {
    RealTimeChart
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

코드 실행:
명령줄에서 다음 명령을 실행하여 코드를 실행하세요:

npm run serve

결론:
위 단계를 통해 우리는 Vue와 ECharts4Taro3를 성공적으로 사용했습니다. 아름다운 실시간 데이터 모니터링 차트를 만들어 보세요. 지속적으로 데이터를 업데이트하고 차트 구성을 조정함으로써 보다 풍부하고 다양한 데이터 모니터링 차트를 얻을 수 있습니다. 이 기사가 여러분에게 도움이 되기를 바라며, Vue 및 ECharts4Taro3의 강력한 기능을 더 자세히 살펴보고 더욱 멋진 실시간 데이터 차트를 만들 수 있기를 바랍니다.

위 내용은 Vue 및 ECharts4Taro3을 사용하여 아름다운 실시간 데이터 모니터링 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!