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 をインストールするグラフィカル チュートリアル
推薦する
vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。
1. 使用バージョンバイト:2.0 ant-design-vue: 2.0.0-rc.8ヴュー:3...
IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)
css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...
Docker 学習: コンテナ コンテナの具体的な使用方法
コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...
Centos7.2 で mysql5.7 データベースをインストールするための詳細な手順
サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...
Linux環境変数の設定戦略の詳細な説明
ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定する必要があります。以下...
jsは動的にテーブルを生成します（ノード操作）
この記事の例では、テーブルを動的に生成するjsの具体的なコードを参考までに共有しています。具体的な内...
Vue3スタイルのCSS変数注入の実装
目次まとめ基本的な例モチベーションデザインの詳細コンパイルの詳細採用戦略練習するヒント適切なプロパテ...
HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例
1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...
CSS で 2 列レイアウトを実現する N 通りの方法
1. 2 列レイアウトとは何ですか? 2 列レイアウトには、左側が固定幅で右側が適応幅のレイアウトと...
MySQL ストアド関数（カスタム関数）の定義と使用方法の詳細な説明
ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...
無効と読み取り専用の機能と違い
1: readonly は、このコントロールをロックして、インターフェイス上で変更できないようにしま...
nginx をシャットダウン/再起動/起動する方法
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります
インターネットで見つけた方法は効果的ですinclude によって導入されたフッター ファイルとヘッダ...
TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。
目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...
クロスブラウザの問題に対する 5 つの解決策 (要約)
簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...