ホームページ > 記事 > ウェブフロントエンド > Vue と ECharts4Taro3 を使用してウォーターフォール チャート効果を備えたデータ視覚化を実装する方法
Vue と ECharts4Taro3 を使用してウォーターフォール チャート効果を備えたデータ視覚化を実装する方法
データ視覚化がさまざまな業界でますます広く使用されるようになるにつれて、ますます多くの開発者がフロント チャートの使用方法に注目し始めています。データのビジュアル表示を実現するエンドテクノロジー。フロントエンド分野で最も人気のあるフレームワークおよびチャート ライブラリとして、Vue と ECharts4Taro3 は、ウォーターフォール チャート効果によるデータ視覚化を実現するシンプルかつ効率的な方法を提供します。
この記事では、Vue と ECharts4Taro3 を使用してウォーターフォール チャート効果を備えたデータ視覚化を実現する方法を紹介し、読者の理解と実践を容易にするコード例を添付します。
Vue と ECharts4Taro3 のインストールと構成
まず、Vue と ECharts4Taro3 をインストールする必要があります。ターミナルを開き、次のコマンドを実行してインストールします。
npm install -g @vue/cli npm install echarts-for-taro3
インストールが完了したら、Vue プロジェクトで対応する構成を実行する必要があります。 Vue のエントリ ファイル main.js で、ECharts4Taro3 ライブラリと関連スタイルをインポートします。
import { createApp } from 'vue'; import ECharts from 'echarts-for-taro3'; const app = createApp(App); app.use(ECharts); app.mount('#app');
ウォーターフォール チャート コンポーネントの作成
次に、データを表示するウォーターフォール チャート コンポーネントを作成する必要があります。視覚化。 Vue プロジェクトで、WaterfallChart.vue という名前のコンポーネント ファイルを作成し、次のように編集します。
<template> <view class="waterfall-chart"> <ec-canvas canvas-id="chart" :canvas-style="canvasStyle" @init="initChart"></ec-canvas> </view> </template> <script> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts-for-taro3'; export default { setup() { const chartRef = ref(null); // 图表实例的引用 // 初始化图表 const initChart = () => { const chart = echarts.init(chartRef.value); const option = { // 瀑布图的配置选项 // ... }; chart.setOption(option); }; onMounted(() => { initChart(); }); return { chartRef, canvasStyle: 'width: 100%; height: 100%;', }; }, }; </script> <style scoped> .waterfall-chart { width: 100%; height: 100%; } </style>
上記のコードでは、Vue の setup
関数を使用してコンポーネントのロジックを定義します。 ref
関数を使用して、変数 chartRef
を定義して、チャートへの参照を保存します。 initChart
関数では、echarts.init
メソッドを使用してチャート インスタンスを作成し、chart.setOption
メソッドを使用してウォーターフォールの構成オプションを設定します。チャート。
ウォーターフォール チャート コンポーネントの使用
ウォーターフォール チャートを使用する必要があるページに WaterfallChart コンポーネントを導入し、関連データを渡して対応するウォーターフォール チャートを生成します。たとえば、WaterfallPage、WaterfallPage.vue という名前のページ ファイルを作成し、次のように編集します。
<template> <view class="waterfall-page"> <waterfall-chart></waterfall-chart> </view> </template> <script> import WaterfallChart from '@/components/WaterfallChart'; export default { components: { WaterfallChart, }, }; </script> <style scoped> .waterfall-page { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } </style>
上記のコードでは、import
ステートメントを使用して、 import 以前に作成した WaterfallChart コンポーネントが導入され、ページで使用されます。
ウォーターフォール チャートのデータを構成し、対応するレンダリングを実装する
WaterfallChart コンポーネントでは、実際のビジネス ニーズに従ってウォーターフォール チャートのデータを構成し、 # を渡す必要があります。 ##chart.setOption メソッドでチャートをレンダリングします。この例では、非同期リクエストを通じてウォーターフォール チャートのデータを取得し、それを
option オブジェクトに構成します。例は次のとおりです:
<script> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts-for-taro3'; export default { setup() { const chartRef = ref(null); // 图表实例的引用 // 初始化图表 const initChart = async () => { const chart = echarts.init(chartRef.value); const data = await fetchData(); // 异步请求获取瀑布图的数据 const option = { tooltip: { trigger: 'item', }, xAxis: { data: data.categories, // 数据的横坐标 }, yAxis: {}, series: [ { type: 'bar', stack: '总量', label: { show: true, }, emphasis: { focus: 'series', }, data: data.data, // 数据的纵坐标 }, ], }; chart.setOption(option); }; onMounted(() => { initChart(); }); return { chartRef, canvasStyle: 'width: 100%; height: 100%;', }; }, }; </script>上記のコードでは、 async/await 非同期リクエストと取得を通じてデータを取得します。
xAxis オブジェクトと
yAxis オブジェクトを構成してウォーターフォール チャートの座標軸を設定し、## の
data 属性を使用してウォーターフォール チャートのデータを構成します。 #series
配列 。
以上がVue と ECharts4Taro3 を使用してウォーターフォール チャート効果を備えたデータ視覚化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。