echarts彙總上海二手房

簡介

• 實現上海二手房全量數據動態更新、統計、彙總展示。
• 效果：
• 前端項目
  • 關鍵流程
• 後端項目

echarts使用

依賴

• 安裝

cnmp install echarts

• 依賴。路徑：views/dashboard/index.vue

<script>
import { mapGetters } from 'vuex'
import { getDistrictSecondHandHouseSummary } from '@/api/table'
import { assembleOptions } from '@/utils/echartsutils'

var echarts = require('echarts');
</script>

框架

• template中搭建框架。路徑：views/dashboard/index.vue

    <el-row>
      <el-col :span="2"></el-col>
      <el-col :span="21">
        <div id="chart1" style="width: 100%;height:500px;"></div>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>

渲染

• 根據返回值,組裝option,渲染template中的視圖框架。
• 渲染邏輯，路徑：views/dashboard/index.vue

<script>
import { mapGetters } from 'vuex'
import { getDistrictSecondHandHouseSummary } from '@/api/table'
import { assembleOptions } from '@/utils/echartsutils'

var echarts = require('echarts');

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      avgUnitPriceOption: {},
      avgTotalPriceOption: {},
      avgTotalHouseOption: {},
      mychart1:{},
    }
  },
  methods: {
    fetchData() {
      getDistrictSecondHandHouseSummary().then(response => {
        let result = response.result;
        let options = assembleOptions(result);
        this.avgTotalHouseOption = options.avgTotalHouseOption;
        this.avgTotalPriceOption = options.avgTotalPriceOption;
        this.avgUnitPriceOption = options.avgUnitPriceOption;
        this.drawChart();
      });
    },
    drawChart() {
      this.mychart1 = echarts.init(document.getElementById("chart1")).setOption(this.avgUnitPriceOption);
      window.addEventListener("resize", () => {
        setTimeout(() => {
          this.mychart1.resize();
        }, 2000)
      });
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

• 工具類，路徑：utils/echartsutils.js

import { formatDate } from '@/utils/date'

export function assembleOptions(result) {
  let options = {};
  let dataX = [];
  for (let i = 0; i < result.timeList.length; i++) {
    dataX.push(formatDate(result.timeList[i]));
  }
  let legend = result.districts;

  let avgUnitPriceY = {};
  for (let key in result.sumMap) {
    avgUnitPriceY[key] = [];
    for (let i = 0; i < result.sumMap[key].length; i++) {
      let node = result.sumMap[key][i];
      avgUnitPriceY[key].push(node.avgUnitPrice);
    }
  }
  options.avgUnitPriceOption = assembleAvgUnitPriceOption(dataX, legend, avgUnitPriceY);

  let avgTotalPriceY = {};
  for (let key in result.sumMap) {
    avgTotalPriceY[key] = [];
    for (let i = 0; i < result.sumMap[key].length; i++) {
      let node = result.sumMap[key][i];
      avgTotalPriceY[key].push(node.avgTotalPrice/10000);
    }
  }
  options.avgTotalPriceOption = assembleAvgTotalPriceOption(dataX, legend, avgTotalPriceY);

  let totalHouseY = {};
  for (let key in result.sumMap) {
    totalHouseY[key] = [];
    for (let i = 0; i < result.sumMap[key].length; i++) {
      let node = result.sumMap[key][i];
      totalHouseY[key].push(node.totalHouseCount);
    }
  }
  options.avgTotalHouseOption = assembleTotalHouseOption(dataX, legend, totalHouseY);
  return options;
}

/**
 * @param dataX 軸
 * @param legend 圖例
 * @param dataY  legend:[]
 * @returns echarts option
 */
export function assembleAvgUnitPriceOption(dataX, legend, dataY) {
  let option = JSON.parse(JSON.stringify(optionTemplate))
  option.title.text = '均價'
  option.yAxis.axisLabel.formatter = '{value}'
  option.xAxis.data = dataX;
  option.legend.data = legend;
  option.series = assembleDataY(dataY);
  return option;
}

export function assembleAvgTotalPriceOption(dataX, legend, dataY) {
  let option = JSON.parse(JSON.stringify(optionTemplate))
  option.title.text = '總價'
  option.yAxis.axisLabel.formatter = '{value}萬'
  option.xAxis.data = dataX;
  option.legend.data = legend;
  option.series = assembleDataY(dataY);
  return option;
}

export function assembleTotalHouseOption(dataX, legend, dataY) {
  let option = JSON.parse(JSON.stringify(optionTemplate))
  option.title.text = '總數'
  option.yAxis.axisLabel.formatter = '{value}'
  option.xAxis.data = dataX;
  option.legend.data = legend;
  option.series = assembleDataY(dataY);
  return option;
}

export function assembleDataY(dataY) {
  let lineList = [];
  for (let key in dataY) {
    let line = {};
    line.name = key;
    line.type = 'line';
    line.markLine = {
      data: [
        {type: 'average', name: '平均值'},
      ]
    };
    line.data = [];
    for (let i = 0; i < dataY[key].length; i++) {
      let node = dataY[key][i];
      line.data.push(node)
    }
    lineList.push(line);
  }
  return lineList;
}

var optionTemplate = {
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: []
  },
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      name: '行政區1',
      type: 'line',
      data: [11, 44, 12],
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    }
  ]
};