Vueプロジェクトでechartを使用する方法
使用手順: 1. "yarn add echarts" または "npm install echarts -S" または "cnpm install echarts -S" コマンドを使用して Echarts をインストールします。 2. メインで "import echarts from ' を使用します。 .js echartsの「Vue.prototype.$echarts = echarts」を導入します; 3. vueページで関連するapiを呼び出すだけです。
開始は簡単
Echarts のインストール
次のインストール方法のいずれかを選択します このプロジェクトはyarn、echarts を使用してインストールされます。バージョン番号は 4.8.0
// yarn yarn add echarts // npm npm install echarts -S // cnpm cnpm install echarts -S
グローバル紹介## main.js
import echarts from 'echarts' Vue.prototype.$echarts = echarts
これに到達このステップは、準備作業が完了したことを意味します
##余分なコードを削除します # を削除しましょう最初にページ上のその他の不要なコードを実行します#<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>ログイン後にコピー
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>#コンテナを作成します#div を作成しますコンテナとして EChart の ID を使用します (ID を使用するときに小さな問題が発生します。これについては最後に答えます)<div id="EChart" style="width: 300px; height: 300px;"></div>
ログイン後にコピー
<div id="EChart" style="width: 300px; height: 300px;"></div>
##getRenderer() {
console.log(this.$echarts);
// 基于准备好的dom，初始化echarts实例
let EChart = this.$echarts.init(document.getElementById("EChart"));
// 配置参数
let config = {
title: { text: "悲伤日记" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 设置参数
EChart.setOption(config);
},ログイン後にコピー##ライフサイクル中にこのメソッドを呼び出します
getRenderer() {
console.log(this.$echarts);
// 基于准备好的dom，初始化echarts实例
let EChart = this.$echarts.init(document.getElementById("EChart"));
// 配置参数
let config = {
title: { text: "悲伤日记" },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
// 设置参数
EChart.setOption(config);
},mounted() {
// 在生命周期中调用 getRenderer 方法
this.getRenderer();
},ログイン後にコピー#大きなスクリーンでご覧ください
mounted() {
// 在生命周期中调用 getRenderer 方法
this.getRenderer();
},## メロンを食べる人たち: " ヤン先生: 「正直に言うと、少し低いです。パニックにならないでください。ここはどこですか? しましょう。」まずは基礎講座から始めましょう」
について話しましょう最初に簡単な設定パラメータをいくつか紹介します。これは退屈ですが、理解すると、将来絵を描くのが簡単になります。 まず、簡単で一般的に使用されるパラメータをいくつか見てみましょう (メモはすべてAPI アドレスに対応)
パラメータ名
関数備考
| ##title | チャート名として | |
|---|---|---|
#凡例 | 図としてのマーカーhttps://echarts.apache.org/zh/option.html#legend | |
xAxis | グラフの X 軸としてhttps://echarts.apache.org/zh /option.html#xAxis | |
yAxis | チャートの Y 軸としてhttps://echarts。 apache.org/zh/option.html#yAxis | |
series | グラフとしてのシリーズhttps://echarts .apache.org/zh/option.html#series | |
color | チャートとしてのカラーリストhttps:/ /echarts.apache.org/zh/option.html#color | |
