今日は、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はストアドプロシージャを通じて文字列を配列に分割します
序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...
まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 コー...
目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...
環境の準備操作を開始する前に、hadoop バージョンがインストールされていることを確認してください...
目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...
この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...
1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...
前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...
I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...
背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...