Vue-eharts

Element-ui VueVue-echarts

19942018

https://github.com/DQinYuan/mapvisual/blob/master/src/assets/finance.json (/src/assets/finance.json)
https://github.com/DQinYuan/mapvisual/blob/master/src/assets/estate.json (/src/assets/estate.json)

https://dqinyuan.github.io/mapvisual/index.html

clone/docs/index.html

     ![](imgs/.png)

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
# /dist/index.html

cnpmnpm

/src/config.js

let config = {
    start:1994,     //1994
    end:2018,       //2018
    interval:2,     //2
    time:150        //150
}
export default config;

198020181994-20181980-1994

echarts/src/components/StateGraph.vueecharts

/src/App.vue/src/Graphs.vue/src/components/StateGraph.vueStateGraph.vueecharts

App.vueGraphts.vueGraphs.vueStateGraph.vue

Vuevue-echarts

App.vue43

    refreshMap(){
      //console.log("refresh");
      this.activeStep = 1;
      bus.$emit("refresh_map");
    }

  "refresh_map"

Graphs.vue96"refresh_map":

    bus.$on("refresh_map", function() {
      clearInterval(that.timerId);
      for (let i = 0; i < that.cursors.length; i++) {
        that.cursors[i] = 0;
      }
      that.financedatas.splice(0, that.financedatas.length);
      that.estatedatas.splice(0, that.estatedatas.length);

      that.start_date = new Date(config.start, 0, 1, 0, 0, 0, 0);
      that.timerId = setInterval(that.job, config.time);
    });

financedatasestatedatassplicesetIntervalsetIntervalconfig.timejobjobfinancedatasestatedatas

Graphs.vue68job:

    this.job = function() {
      update(finances, that.financedatas, 0, that.start_date, 10);
      update(estates, that.estatedatas, 1, that.start_date, 10);

      //
      let previousYear = that.start_date.getFullYear();
      that.start_date = utils.upgradeDateByQuarter(that.start_date);
      //console.log(previousYear);
      //console.log(that.start_date.getFullYear());
      //console.log("--------------------------------");
      // console.log(that.start_date.getMonth());
      if (previousYear != that.start_date.getFullYear()) {
        inter_flag += 1;
        if (inter_flag % config.interval == 0) {
          bus.$emit("step");
        }
        if (previousYear == config.end - 1) {
          //console.log("++++++++++++++++++++++++++++=");
          clearInterval(that.timerId);
        }
      }
    };

that.start_date = utils.upgradeDateByQuarter(that.start_date);Quarterif (previousYear != that.start_date.getFullYear())``if (inter_flag % config.interval == 0)"step"App.vueupdateupdatefinancesestatesthat.start_datefinancedatasestatedatas

updateGraphs.vue50

    /**
     * fields:echarts
     * field_datas:
     * cursor_index:(cursors)
     * com_date:
     * factor:
     */
    function update(fields, field_datas, cursor_index, com_date, factor) {
      for (
        ;
        that.cursors[cursor_index] < fields.length;
        that.cursors[cursor_index]++
      ) {
        let field = fields[that.cursors[cursor_index]];
        // console.log(utils.date2string(this.start_date));
        // console.log(finance.datestr);
        if (utils.string2date(field.datestr).valueOf() <= com_date.valueOf()) {
          field_datas.push([field.lon, field.lat, factor]);
        } else {
          break;
        }
      }
    }