vue中vuex,echarts,地圖,ueditor的使用(一篇就夠)

大漠火狼發表於2018-06-11
VueEcharts地圖

前言

vue-cli生成的template還需要配置axios,vuex,element等外掛,該專案中將這些常用外掛進行了配置; 專案開發中template可以快速複用,也是可以快速上手vue的一個demo;

1.動態效果圖

vue中vuex,echarts,地圖,ueditor的使用(一篇就夠)

2.技術棧

  1. 技術棧:vue+vue-router+webpack+axios+echarts+ueditor+element UI+map+node-sass;
  2. 功能模組:資料視覺化,地圖,普通表格的增刪,可編輯表格,合併表格，左側選單可展收;
  3. 適配：使用百分比佈局，適配pc所有機型；
  4. 目的:專案開發可以快速複用的專案模板；

3.詳細技術點

  1. props+$emit:父子元件傳值;
  2. axios: axios.interceptors.request(response)實現axios的全域性攔截 axios.get(post)請求介面
  3. vuex:實現公共資料模組化管理和非父子元件通訊 4 .vuex-persistedstate:實現vuex資料的快取 5 .echarts:折線圖,柱狀圖,扇形圖和儀表等資料視覺化
  4. 高德地圖:地圖展示
  5. ueditor:富文字編輯器 8 .utiles:裡面封裝了常用工具類
  6. element UI+slot:可編輯表格
  7. table:原生table實現表格拆分,展示覆雜資料

github原始碼地址

戳這裡 這個template後期會持續更新完善,歡迎star,謝謝噠

4.專案目錄

vue中vuex,echarts,地圖,ueditor的使用(一篇就夠)

5.核心程式碼分析

5.1store模組程式碼

1.入口index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'//可以將vuex資料快取到sessionStorage中
import comTable from './modules/comTable'
 Vue.use(Vuex)
    
 export default new Vuex.Store({
   modules: {
     comTable//將vuex拆分成模組
   },
   plugins: [createPersistedState({ storage: window.sessionStorage })]
  })
複製程式碼

2.modules下面comTable.js檔案:

import * as comTableApi from '@/api/comTable'//將請求介面檔案拆分

// initial state
const state = {
  tableData: [],
}

// getters
const getters = {
  allTableData: state => state.tableData,
}

// actions,非同步提交,將ajax相關程式碼寫入這個屬性,而後commit改變mutation
const actions = {
  getAllData ({ commit }) {
    comTableApi.getComAjax('static/comTable.json',{obj1:'',obj2:''},(tableData) => {
      commit('setTableData', tableData)
     })
  }
}

// mutations,同步提交,可以改變state的值
const mutations = {
  setTableData (state,tableData) {
    state.tableData = tableData
  }
}
複製程式碼

3.在.vue中的使用 兩種方法: this.$store.comTable.state(distapch)可以設定 藉助mapGetters,mapActions輔助函式:

import { mapGetters, mapActions } from "vuex";
computed: mapGetters({
  tableData: "allTableData",
}),
mounted() {
  this.getAllData();
},
methods:{
  ...mapActions([
   'getAllData'//需要呼叫
]),}
複製程式碼

5.2 echarts模組

echarts官網提供了setOption的引數,只需要獲取頁面的dom,然後設定setOption屬性

let histogram = this.$echarts.init(document.getElementById("histogram"));//tempalte設定一個標籤
 // 繪製圖表
 histogram.setOption({//物件引數為obj
  title: { text: "ECharts 入門示例" },
  tooltip: {},
  xAxis: {
    data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]//橫向座標值
  },
  yAxis: {},
  series: [
  {
   name: "銷量",
   type: "bar",
   data: [5, 20, 36, 10, 10, 20]
   }
   ]
   });
複製程式碼

5.3 ueditor模組

將下載好的static放到static目錄下,在main.js引入,在對應的vue檔案中

this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
  _this.editor.setContent(_this.defaultMsg); // 確保UE載入完成後，放入內容。
});
this.editor.getContent()//獲取富文字內容
複製程式碼

5.4 地圖

我是使用高德地圖,在index.html全域性匯入

<script src="http://webapi.amap.com/maps?v=1.4.6&key=9f63e48dcb3ccddc5cf6601788186f13&plugin=AMap.MouseTool"></script>//key為我申請的,也可以自己去申請
複製程式碼

高德地圖官網案例

相關文章