vue scss 使用 script 中的变量_vue中使用openlayersecharts

openlayers

1、打开项目，安装openlayers

cnpm i -S ol

2、新建 OlMap.vue组件

<template>    <div id="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'let maptype=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')