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はストアドプロシージャを通じて文字列を配列に分割します

推薦する

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...

Dockerを使用してMySQLデータベースをインストールするDeepinの詳細な説明

まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...

Docker クロスホストネットワーク (オーバーレイ) の実装

1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...

Vueはシンプルな画像切り替え効果を実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 コー...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

Tencent Cloudでhive3.1.2を構築する方法を教えます

環境の準備操作を開始する前に、hadoop バージョンがインストールされていることを確認してください...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...