uniappを使用してWeChatミニプログラムでEChartsを使用する方法

uniappを使用してWeChatミニプログラムでEChartsを使用する方法

今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。

mpvue-echartsを参照してください

参考: https://github.com/F-loat/mpvue-echarts

https://ask.dcloud.net.cn/article/36288

改善する

インターネット上には多くのチュートリアルがありますが、あまり明確ではありません。以下の手順に直接進みましょう。

1. npm をインストール echarts mpvue-echarts

このコマンドを実行すると、node_modules の下に mpvue-echarts と echarts が生成され、mpvue-echarts の下の src が components の下に配置され、echarts の js ファイルが https://echarts.apache.org/zh/builder.html で以下のようにカスタマイズされます。

ここに画像の説明を挿入

マップの実装:

<テンプレート>
	<view class="wrap">
		<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
	</ビュー>
</テンプレート>

<スクリプト>
import * as echarts from '@/common/echarts.min'; /*chart.min.js はオンラインでカスタマイズされます*/
import * as henanJson from 'echarts/map/json/province/henan.json'; /*chart.min.js はオンラインでカスタマイズされます*/
'@/components/mpvue-echarts/src/echarts.vue' から mpvueEcharts をインポートします。


エクスポートデフォルト{
	データ() {
		戻る {
			echarts、
		};
	},
	コンポーネント:
		mpvueEcharts
	},
	オンロード() {
		
	},
	メソッド: {
		レンダリングマップ(e) {
			var mydata = [
				{ 名前: '鄭州市'、値: 100 },
				{ 名前: '洛陽市', 値: 10 },
				{ 名前: '開封市', 値: 20 },
				{ 名前: '信陽市', 値: 30 },
				{ 名前: '駐馬店市'、値: 40 },
				{ 名前: '南陽市', 値: 41 },
				{ 名前: '周口市', 値: 15 },
				{ 名前: '許昌市', 値: 25 },
				{ 名前: '平頂山市', 値: 35 },
				{ 名前: '新郷市', 値: 35 },
				{ 名前: '洛河市', 値: 35 },
				{ 名前: '商丘市'、値: 35 },
				{ 名前: '三門峡市', 値: 35 },
				{ 名前: '済源市', 値: 35 },
				{ 名前: '焦作市', 値: 35 },
				{ 名前: '安養市'、値: 35 },
				{ 名前: '鶴壁市'、値: 35 },
				{ 名前: '濮陽市', 値: 35 },
				{ 名前: '開封市'、値: 45 }
			];
			{ キャンバス、幅、高さ } = e とします。
			echarts.setCanvasCreator(() => キャンバス);
			const chart = echarts.init(canvas, null, {
				幅: 幅、
				高さ: 高さ
			});
			echarts.registerMap('henan', henanJson);
			キャンバスにチャートを設定します。
			var オプションマップ = {
				ツールチップ: {
					トリガー: 'アイテム',
					フォーマッタ: '{b}: {c}mg/m³'
				},
				// 左側の小さなナビゲーションアイコン visualMap: {
					表示:true、
					最小: 0,
					最大: 100,
					左: '右'、
					方向:'水平',
				},
				//構成プロパティシリーズ: [
					{
						タイプ: 'マップ'、
						マップタイプ: '河南',
						ラベル: {
							普通: {
								表示: 真
							},
							強調:
								テキストスタイル: {
									色: '#fff'
								}
							}
						},
						アイテムスタイル: {
							普通: {
								境界線の色: '#389BB7',
								エリアカラー: '#fff'
							},
							強調:
								エリアカラー: '#389BB7',
								境界線の幅: 0
							}
						},
						アニメーション: false、
						データ: mydata //データ }
				]
			};
			//echartsインスタンスを初期化します chart.setOption(optionMap);
			this.$refs.mapChart.setChart(チャート);
		}
	}
};
</スクリプト>

<スタイル スコープ lang="scss">
。包む {
  幅: 100%;
  高さ: 400px;
}
</スタイル>

効果:

ここに画像の説明を挿入

地図のjsonファイルについては、echarts\map内

uniapp が WeChat ミニプログラムで ECharts を使用する方法についてはこれで終わりです。uniapp が ECharts を使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • Uniapp WeChatアプレット: キー障害の解決策
  • Uniapp WeChatアプレットは1ページに複数のカウントダウンを実現します
  • uniapp、WeChat アプレットで MQTT を使用する際の問題
  • WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

<<:  MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

>>:  Mysqlはストアドプロシージャを通じて文字列を配列に分割します

推薦する

Nginx を使用して rtmp ライブ サーバーを実行する方法

今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...

Linuxのファイルとフォルダの権限を操作する方法

Linux のファイル権限まず、現在のディレクトリ内のファイルの内容を確認しましょう。 ls -l ...

JavaScript における正規表現の実際的な応用の詳細な説明

実際の業務では、JavaScript の正規表現が依然として頻繁に使用されます。したがって、この部分...

ハッシュテーブルのJavaScript実装の詳細な説明

目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...

mysql data_dirの変更によって発生するエラー問題を解決する

今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

MySQL の重複データの処理方法 (防止と削除)

一部の MySQL テーブルには重複レコードが含まれている場合があります。重複データが存在することを...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

今日、CentOS6.2 をインストールしていたところ、ハード ドライブの検出段階を通過できませんで...

Vue+js 矢印をクリックして画像を切り替える

この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...

vue-router 履歴モード サーバー側設定プロセス記録

歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...