vue+echarts で中国地図のフロー効果を実現する (詳細な手順)
|
@vue+echarts は中国地図のフロー効果を実現します #レンダリングを見てみましょう
手順: コマンドnpm run echarts -sを実行し、Enterキーを押します。
このプロンプトが表示されたら、インストールは成功です。追記: ネットワークが良好でない場合は、cnpm Taobao ミラーを使用することをお勧めします (グローバル ターミナル実行コマンド: npm i -g cnpm --registry=https://registry.npm.taobao.org)
china.js をダウンロード リンク: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 抽出コード: gjz4 導入 'echarts/lib/echarts' から echarts をインポートします。 '@/map/china.js' をインポートします。 refをバインドするためのechartsコンテナを書く <div class="wrapper"> <div class="map-container" style="幅: 100%; 高さ: 100%" ref="myEchart" ></div> </div> オプションの設定（必要なコメントはマークされています）
<スクリプト>
echarts = require("echarts"); とします。
「echarts/lib/component/markLine」をインポートします。
マウントされた(){
データ = [
{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
"名前": "天津",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "248"
}, { "name": "河北省", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
"名前": "山西省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "250"
}, { "name": "内モンゴル", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
"名前": "遼寧省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "252"
}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
"名前": "黒龍江省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "254"
}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
"名前": "江蘇省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "256"
}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
"名前": "安徽省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "258"
}, { "name": "福建省", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
"名前": "江西省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "260"
}, { "name": "山東", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
"名前": "河南",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "262"
}, { "name": "湖北省", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
"名前": "湖南",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "264"
}, { "name": "広東省", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
"名前": "広西",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "266"
}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
"名前": "重慶",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "268"
}, { "name": "四川省", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
"名前": "貴州省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "270"
}, { "name": "雲南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
"名前": "チベット",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "272"
}, { "name": "陕", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
"名前": "甘粛省",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "274"
}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
"名前": "寧夏",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "276"
}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
"名前": "台湾",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "278"
}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
"名前": "マカオ",
"データカウント": [0, 0, 0, 0, 0, 0, 0, 0],
"id": "280"
}]
chinaGeoCoordMap = {とする
「黒龍江」: [127.9688, 45.368,1],
「内モンゴル」: [110.3467, 41.4899,1],
「吉林」: [125.8154, 44.2584,1],
「北京」: [116.4551, 40.2539,2],
「遼寧」: [123.1238, 42.1216,1],
「河北」: [114.4995, 38.1006,1],
天津: [117.4219, 39.4189,1],
「山西」: [112.3352, 37.9413,1],
「陝西省」: [109.1162, 34.2004,1],
甘粛省: [103.5901, 36.3043,1],
'寧夏': [106.3586, 38.1775,1],
'青海': [101.4038, 36.8207,1],
「新疆」: [87.9236, 43.5883,1],
「チベット」: [91.11, 29.97,1],
「四川」: [103.9526, 30.7617,1],
「重慶」: [108.384366, 30.439702,1],
「山東」: [117.1582, 36.8701,1],
河南省: [113.4668, 34.6234,1],
「江蘇」: [118.8062, 31.9208,1],
'安徽': [117.29, 32.0581,1],
湖北省: [114.3896, 30.6628,1],
浙江省: [119.5313, 29.8773,1],
福建省: [119.4543, 25.9222,1],
江西省: [116.0046, 28.6633,1],
「湖南」: [113.0823, 28.2568,1],
'貴州': [106.6992, 26.7682,1],
「雲南」: [102.9199, 25.4663,1],
'広東省': [113.12244, 23.009505,1],
「広西」: [108.479, 23.1152,1],
「海南」: [110.3893, 19.8516,1],
「上海」: [121.4648, 31.2891,1],
「台湾」: [120.991676054688, 24.7801149726563,1],
「マカオ」: [113.33, 22.11,1],
「香港」: [114.15, 22.15,1]
}
(i=0;i<data.length;i++) の場合{
var da = chinaGeoCoordMap[データ[i].name];
chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
}
chinaDatas = [ とします。
[{
名前:「北京」
値: 2
}], [{
名前: 「黒龍江」
値: 1
}], [{
名称:「内モンゴル」
値: 1
}], [{
名前: '吉林'、
値: 1
}], [{
名前: '遼寧'、
値: 1
}], [{
名前: '河北'、
値: 1
}], [{
名前: '天津'、
値: 1
}], [{
名前:「山西」
値: 1
}], [{
名前: '陝西'、
値: 1
}], [{
名前: '甘粛'、
値: 1
}], [{
名前: '寧夏'、
値: 1
}], [{
名前: '青海'、
値: 1
}], [{
名前: 「新疆」、
値: 1
}], [{
名前:「チベット」
値: 1
}], [{
名前: '四川'、
値: 1
}]、[{
名前:「重慶」
値: 1
}]、[{
名前:「山東」
値: 1
}], [{
名前: '河南'、
値: 1
}], [{
名前: '江蘇'、
値: 1
}], [{
名前: '安徽'、
値: 1
}], [{
名前: '湖北'、
値: 1
}], [{
名前: '浙江'、
値: 1
}], [{
名前: '福建'、
値: 1
}], [{
名前: '江西'、
値: 1
}], [{
名前: '湖南'、
値: 1
}], [{
名前: '貴州'、
値: 1
}], [{
名前:「広東」
値: 1
}], [{
名前: '広西'、
値: 1
}], [{
名前: '雲南'、
値: 1
}], [{
名前:「海南」
値: 1
}], [{
名前: '上海'、
値: 1
}], [{
名前: '台湾'、
値: 1
}], [{
名前: 'マカオ'、
値: 1
}]、[{
名前: '香港'、
値: 1
}]
]
convertData = 関数 (データ) {
var res = [];
(var i = 0; i < データ長さ; i++) {
var データアイテム = データ[i];
var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
var toCoord = [117.1582, 36.8701];
if (fromCoord && toCoord) {
res.push([{
座標: fromCoord、
値: データ項目[0].値
}, {
座標: toCoord、
}]);
}
}
res を返します。
};
seriesA = []とする
シリーズA.push(
{
タイプ: '行'、
zレベル: 1,
効果：
表示: true、
period: 4, //矢印は速度を指し、値が小さいほど速度が速くなります trailLength: 0.3, //特殊効果の軌跡の長さ [0,1] 値が大きいほど軌跡が長くなります symbol: 'pin', //矢印アイコン symbolSize: 8, //アイコンのサイズ color: '#2a6fd9'
},
線のスタイル:
普通： {
色: '#003262',
width: 1, // トレイルラインの幅 opacity: .9, // トレイルラインの透明度 curveness: .3 // トレイルラインの直線度 }
},
データ: convertData(chinaDatas)
},
{
タイプ: 'effectScatter',
座標系: 'geo',
zレベル: 2,
rippleEffect: { // 波紋効果 period: 2, // アニメーション時間、値が小さいほど速度が速くなります brushType: 'fill', // 波紋の描画方法 ストローク、塗りつぶし
scale: 6, // 波紋リングの上限。値が大きいほど波紋が大きくなります。color: '#003262' // 波紋の色。デフォルトは散布点の色です。
},
ラベル: {
普通： {
表示: true、
色: '#283c64',
position: 'top', // 表示位置 offset: [0, 0], // オフセット設定 formatter: function (params) { // 円形表示テキスト return params.data.name
},
フォントサイズ: 13
},
強調：
表示:偽
}
},
シンボル: '円'、
シンボルサイズ: 関数 (val) {
return 1 + val[2] * 5 // リングのサイズ },
アイテムスタイル: {
色: "#2a6fd9",
影ぼかし: 4,
影色: "#2a6fd9",
},
データ: chinaDatas.map(function (dataItem) {
戻る {
名前: データ項目[0].名前、
値: chinaGeoCoordMap[dataItem[0].name],
アイテムスタイル: {
色: "#2a6fd9",
影ぼかし: 4,
影色: "#2a6fd9",
}
}
})
},
//攻撃ポイント{
タイプ: '散布'、
座標系: 'geo',
zレベル: 2,
ラベル: {
普通： {
表示: 偽、
位置: '右'、
色: '赤'、
フォーマッタ: '{b}',
テキストスタイル: {
色: 「赤」
}
},
強調：
表示: true、
色: 「赤」
}
},
シンボル: 'ピン'、
シンボルサイズ: 0,
データ： [{
名前:「山東」
値: chinaGeoCoordMap['山东'].concat([10]),
}],
}
);
オプション = {
ツールチップ: {
表示: true、
トリガー: 'アイテム',
背景色: '#2e65fd',
境界線の色: '#FFFFCC',
表示遅延: 0,
非表示遅延: 0,
入力可能: true、
遷移期間: 0,
追加Cssテキスト: 'z-index:100',
フォーマッタ: 関数 (パラメータ、チケット、コールバック) {
console.log(パラメータ)
// ビジネスに応じて表示するコンテンツを展開する var res = ''
var 名 = パラメータ名
var value1 = params.value[params.seriesIndex + 3] || 0
var value2 = params.value[params.seriesIndex + 4] || 0
var value3 = params.value[params.seriesIndex + 5] || 0
var value4 = params.value[params.seriesIndex + 6] || 0
var value5 = params.value[params.seriesIndex + 7] || 0
var value6 = params.value[params.seriesIndex + 8] || 0
var value7 = params.value[params.seriesIndex + 9] || 0
res = "<span style='color:#fff'>" + 名前 + '</span>' +
'<br/>' +
'<i class="icon icon-xuesheng"></i> 学生:' + value1+
'<br/>' +
'<i class="icon icon-laoshi_huaban"></i> 先生:'+value2+
'<br/>' +
'<i class="icon icon-baoanxiehui"></i> 青年起業家協会:'+value3+
'<br/>' +
'<i class="icon icon-rencaizhengce"></i> 若手起業家:'+value4+
'<br/>' +
'<i class="icon icon-investmentinstitutions"></i> 上位 10 業種:'+value5+
'<br/>' +
'<i class="icon icon-caozuoyaoqingjiabin"></i> サミットゲスト:'+value6+
'<br/>' +
'<i class="icon icon-rencai"></i> ハイエンドの才能:'+value7
戻り値
}
},
地域:
//南シナ海を隠す{
名称：「南シナ海諸島」
アイテムスタイル: {
普通： {
境界線の色: "赤",
borderWidth: 20, //外側の境界線の不透明度を設定します: 0, //0 の場合、グラフィックは描画されません},
},
ラベル: {
show: false, // テキストを非表示},
},
]、
背景色: "rgba(0, 0, 0, 0.1)",
地理: {
地図: '中国',
ズーム: 1.2,
ラベル: {
普通： {
色: '#1e2d4c'
},
強調：
表示:偽
}
},
roam: false, // スケーリングを許可するかどうか itemStyle: {
普通： {
//マップフレームのborderColorを設定します: "#003262",
borderWidth: 11, //外側の境界線を設定する},
強調：
エリアカラー: "#003262",
影色: "#003262",
},
},
アイテムスタイル: {
普通： {
color: '', // 地図の背景色 borderColor: '#5ea8ff', // 州と市の境界線 00fcff 516a89
境界線の幅: 1
},
強調：
color: '#81acff' // フローティング背景 }
}
},
シリーズ: シリーズA
}
}
</スクリプト>echartsを初期化するだけ this.myEchart = echarts.init(this.$refs.myEchart); this.myEchart.setOption(オプション); これで、vue+echarts を使って中国地図のフロー効果を実現する方法についての記事は終わりです。vue+echarts の中国地図に関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル
>>: VMWare に CentOS 7.3 をインストールするグラフィカル チュートリアル
推薦する
mysql スケジュールタスク (イベント イベント) の詳細な説明
1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...
JS+Canvas が抽選ホイールを引く
この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...
CSS セレクターの重みの理解（個人テスト）
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
Linux CRM デプロイメント コードの詳細な説明
Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...
Linuxファイル削除後にスペースが解放されない問題の詳しい説明
序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...
CSS オーバーフローラップの新しいプロパティ値をどこでも使用
1.まず、overflow-wrap属性を理解する CSS のoverflow-wrapプロパティは...
MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル
Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...
MacでのMySQL初期化パスワード操作
Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...
Docker Secretの管理と使用の詳細な説明
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
vue.jsは画像のURLに従って画像をダウンロードします
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
MySQLの自動増分IDについて知っておくべきこと
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析
概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...
MySQLでホワイトリストアクセスを設定する方法
MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...
Docker実践: Pythonアプリケーションのコンテナ化
1. はじめにコンテナはサンドボックス メカニズムを使用して相互に分離します。コンテナ内にデプロイさ...
js と jQuery での Ajax の使用例の詳細
目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...