ホームページ > 記事 > ウェブフロントエンド > echartsマップをvueにインポートする方法
インポート方法: 1. 「npm install echarts -S」コマンドを使用して echarts の依存関係をインストールします; 2. echarts を「main.js」にグローバルに導入します; 3. import ステートメントを使用して「 china.js」を導入します" ファイルに関連するコードを追加するだけです。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
要件: 各州の名前を表示し、マークの上をスライドして接続数を表示し、マークをクリックして接続されているシステムの数を表示します。対応するページ情報にジャンプする入り口;
1. 依存関係をインストールします
npm install echarts -S
2. main.js
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
3 をグローバルに導入します。地図が必要なページに地図 china.js を導入します。公式ドキュメントを表示し、クリックして保存した china.js をダウンロードします (抽出コード 4rxi)
import '../../../static/js/chinamap/china.js' // 引入中国地图数据
完全なサンプル コード:
<script> import &#39;../../../static/js/chinamap/china.js&#39; // 引入中国地图数据 export default { data() { return { ifbox:false, TipsList:[], } }, mounted() { this.ChinaMap(); }, methods: { //点击模拟数据右箭头跳转外页面, toClient(id){ this.$router.push({ path: "/Client", query: { lesseeCompanyId: id } }); }, ChinaMap(){ var that=this; //模拟数据 let data = [ {name: '海门', value: 90 ,num: 5,id:8}, {name: '鄂尔多斯', value: 102 , num: 15, id:16}, {name: '齐齐哈尔', value: 140, num: 30 ,id:20} ]; let geoCoordMap = { '海门':[121.15,31.89], '鄂尔多斯':[109.781327,39.608266], '齐齐哈尔':[123.97,47.33] }; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), num: geoCoord.concat(data[i].num), id: geoCoord.concat(data[i].id) }); } } return res; }; let myChartChina = this.$echarts.init(document.getElementById('myChartChina')) //这里是为了获得容器所在位置 window.onresize = myChartChina.resize; myChartChina.setOption({ // 进行相关配置 backgroundColor: '#1c2431',//地图背景色 geo: { // 这个是重点配置区 map: 'china', // 表示中国地图 label: { normal:{ show: true, // 是否显示对应地名 textStyle: { //字体颜色 color: '#797979' } }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { borderWidth: 1, // 地图边框宽度 borderColor: '#014888', // 地图边框颜色 areaColor: '#026295' // 地图颜色 }, emphasis: {//选中省份的颜色 areaColor: '#026295', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, borderWidth: 1, shadowColor: '#fff' } } }, //滑动显示数据 tooltip: { trigger: 'item', formatter: function(params) { return params.name + ' 已接入: ' + params.data.num[2]; } }, series: [{ name: '散点', type: 'scatter', coordinateSystem: 'geo', color:"#e1ebe3",//点的颜色 data: convertData(data), symbolSize: 25,//点的大小 symbol:"pin",//点的样式 cursor:"pointer",//鼠标放上去的效果 label: { normal: {//默认展示 show: false }, emphasis: {//滑过展示 show: false } }, itemStyle: { emphasis: { borderColor: '#5c8f6e', borderWidth: 5 } } }, { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, tooltip: { show: false } }, ], }) // if (myChartChina && typeof myChartChina === "object") { // myChartChina.setOption(myChartChina, true); // } myChartChina.on('click', function (params) { //点击事件 if (params.componentType === 'series') { if(params.data){ that.TipsList=params.data that.ifbox=true that.boxPosition() }else{ that.ifbox=false } } }); }, //点击地点显示对应位置数据 boxPosition(){ var e = event || window.event; var x=e.clientX+145+"px", y=e.clientY+5+"px"; clearTimeout(t) var t = setTimeout(function (){ $('#box').css('top',y), $('#box').css('left',x) }, 100); t }, } } </script>客户数量
3600租户数量
1500控制系统数量
20800接入系统数量
3600{{TipsList.name}}{{TipsList.value[2]}}
系统数量
{{TipsList.num[2]}}
已接入
提示:滚动鼠标滚轮控制地图缩放
完成後の写真: スタイルの変更については、公式ドキュメントを参照し、ご自身で修正してください。その他の地図例については、クリックして https://gallery.echartsjs をご覧ください。 .com/explore.html#charts=map~sort=rank~timeframe=all~ author=all
関連する推奨事項:「vue.js チュートリアル」
以上がechartsマップをvueにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。