✨ステップ1
scaffolding に echarts の依存関係をインストールします: npm i echarts
✨ステップ2
echart 公式 Web サイトを開いてクイック スタート ページに入り、下図の完全なコードを見つけます。これには、使用するための詳細な手順が含まれています。
✨ステップ3
上の図から次のことがわかります。
- ダウンロードしたばかりの ECharts ファイルをインポートする
- ECharts の幅と高さが定義された DOM を準備する
- 用意したdomをもとにechartsインスタンスを初期化
- チャートの構成項目とデータを指定する
- 指定した構成アイテムとデータを使用してグラフを表示します。
✨ステップ4
上記の使用手順に従い、まず vue ファイルに echarts をインポートし、script タグに記述します。
<script>
// 1、导入echarts
import * as echarts from 'echarts'
export default {
};
</script>
次に、幅と高さを定義したDOMを用意し、テンプレートタグに記述します
<template>
<!-- 2、为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px; height: 600px">hahaha</div>
</template>
次に、echarts インスタンスを初期化し、チャートの構成アイテムとデータを指定し、指定した構成アイテムとデータを使用してチャートを表示し、mounted() ライフサイクル関数に記述します。
// 在挂载声明周期函数中初始化,因为此时页面上的Dom元素已经渲染完毕了
mounted() {
// 3、基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 4、指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
✨ステップファイブ
次の図に示すように、npm run serve コマンドを実行して開き、効果を確認します。
単純じゃないですか