vue scss 使用 script 中的變數_vue中使用openlayersecharts

阿新 • • 發佈：2020-12-16

技術標籤：vue scss 使用 script 中的變數 vue 提示框 vue中使用echarts橫向柱狀圖 vue中使用echart橫向條形圖 vue中使用plus報錯未定義 vue中使用swiper

openlayers

1、開啟專案，安裝openlayers

cnpm i -S ol

2、新建 OlMap.vue元件

<template><divid="map"ref="rootmap">    div>template><script>import "ol/ol.css"import { Map, View } from "ol"import mapconfig from '../config/mapconfig'export default {  data() {    return {      map: null    };  },  mounted() {    var mapcontainer = this.$refs.rootmap;    this.map = new Map({      target: mapcontainer,      layers: mapconfig.streetmap(),      view: new View({        projection: "EPSG:4326",    //使用這個座標系        center: [mapconfig.x,mapconfig.y],  //深圳        zoom: mapconfig.zoom      })    });  }};script><style>#map{  height:640px;}/*隱藏ol的一些自帶元素*/.ol-attribution,.ol-zoom { display: none;}style>

3、一些資訊放置到配置檔案中,src目錄下新建config資料夾，建mapconfig.jssrc/config/mapconfig.js

import TileLayer from "ol/layer/Tile"import TileArcGISRest from 'ol/source/TileArcGISRest'import OSM from "ol/source/OSM"import XYZ from 'ol/source/XYZ'letmaptype=2//0表示部署的離線瓦片地圖，1表示OSM,2表示使用Arcgis線上午夜藍地圖服務var streetmap=function(){    var maplayer=null;    switch(maptype){        case 0:            maplayer=new TileLayer({                source: new XYZ({                    url:'http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg'                })            })        break;        case 1:            maplayer=new TileLayer({                source: new OSM()            })        break;        case 2:            maplayer=new TileLayer({                source:new TileArcGISRest({                    url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'                })            })        break;    }    return [maplayer];}var mapconfig={    x:114.064839,     //中心點經度和緯度    y:22.548857,    zoom:15,          //地圖縮放級別    streetmap:streetmap};export default mapconfig

4、在父元件中使用

echarts

1、安裝echarts依賴

npm install echarts -S

2、全域性引入(main.js)

import echarts from 'echarts'Vue.prototype.$echarts = echarts

3、Echarts.vue

注意：我們要在mounted生命週期函式中例項化echarts物件。因為我們要確保dom元素已經掛載到頁面中

"myChart" :style="{width: '300px', height: '300px'}">

export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基於準備好的dom，初始化echarts例項 let myChart = this.$echarts.init(document.getElementById('myChart')) // 繪製圖表 myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } }}

4、按需引入

由於全域性引入會將所有的echarts圖表打包，導致體積過大。在Echarts.vue檔案中，使用 require 而不是 import

// 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱狀圖元件require('echarts/lib/chart/bar')// 引入提示框和title元件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')