今日は、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 を応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明
>>: Mysqlはストアドプロシージャを通じて文字列を配列に分割します
今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...
Linux のファイル権限まず、現在のディレクトリ内のファイルの内容を確認しましょう。 ls -l ...
実際の業務では、JavaScript の正規表現が依然として頻繁に使用されます。したがって、この部分...
目次1. ハッシュテーブルの原理2. ハッシュテーブルの概念3. ハッシュ競合問題1. チェーンアド...
今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...
以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...
一部の MySQL テーブルには重複レコードが含まれている場合があります。重複データが存在することを...
目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...
ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...
今日、CentOS6.2 をインストールしていたところ、ハード ドライブの検出段階を通過できませんで...
この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...
歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...