How to use vue-echarts - 4 common examples

import {
  Loading,
  Notification,
  Message,
  Tooltip,
  Select,
  Option,
} from 'element-ui';

import ECharts from 'vue-echarts';
// custom theme
import themeObj from '../themes/xuetangx.project.json';
// registering custom theme
ECharts.registerTheme(themeObj.themeName, themeObj.theme);

class GlobalComponents {
  static install(V: any): void {
    V.prototype.theme = themeObj.themeName;
    V.component('echarts', ECharts);
    V.prototype.$message = Message;
    V.prototype.$notify = Notification;

    V.use(Loading.directive);
    V.use(Tooltip);
    V.use(Select);
    V.use(Option);
  }
}

export default GlobalComponents;

makeupChart() {
      if(this.selectMapType === '')
        this.$Message.error('请选择地图类型')
      else {
        if(this.excelData.data !== undefined) {
          this.userOptions.mapType = this.selectMapType
          this.option = map.getMapData(this.excelData, this.userOptions)
          this.selectMapType === 'china' ?  ECharts.registerMap('china', chinaMap) : ECharts.registerMap('world', worldMap)
          this.showChart = true
          this.showEditMapBtn = true
          let updateMapDate = new Date(_.now()).toLocaleString()
          ajax.post({
            url: url.ASYNC_UPLOAD,
            data: {
              userId: this.userId,
              mapData: this.excelData,
              updateMapDate: updateMapDate
            }
          }).then(data => {})
        }
        else {
          this.$Spin.show()
          ajax.post({
            url: url.ASYNC_DOWNLOAD,

mapZoomUp() {
      if(this.userOptions.zoom !== 5) {
        this.userOptions.zoom ++
        this.userOptions.roam = true
        this.option = map.getMapData(this.excelData, this.userOptions)
        this.selectMapType === 'china' ?  ECharts.registerMap('china', chinaMap) : ECharts.registerMap('world', worldMap)
      }
    },
    mapZoomDown() {