hemall.terabimsoft.com.cn/plugins/shop-statistics/assets/js/order.js

let ordersChart = null
const ordersChartOption = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  grid: {
    right: 0,
    bottom: 25
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: []
}

let transcationChart = null;
const transcationChartOption = {
  title: {
    text: '',
    subtext: '注:下单转化率=支付人数/下单人数 ，支付转化率=支付人数/访客人数',
    top: 20,
    left: 'right',
    align: 'left'
  },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    top: 100,
    left: 50,
    right: 50
  },
  legend: {
    right: 0
  },
  xAxis: {
    type: 'category',
    data: [],
  },
  yAxis: {
    type: 'value',
    name: "转化率：%",
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: [{
    data: [],
    type: 'line'
  }]
}


let orderDistributedChart = null;
const orderDistributedChartOption = {
  tooltip: {
    trigger: 'item'
  },
  geo: [
    {
      map: 'China',
      zoom: 1.2, //默认显示级别
      aspectScale: 0.9,   //设置1:1的显示比例
      label: {
        show: false
      },
      select: {          //设置选中样式
        itemStyle: {
          areaColor: "white" //自定义选中区域颜色
        }
      },
      emphasis: {
        label: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#e6e6e6',
          borderWidth: 0.7,
          borderColor: 'rgba(0,0,0,0.2)',
        }
      }
    }
  ],
  visualMap: {
    min: 0,
    max: 1000,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#ebfcf1', '#c6f7d7', '#90f0ad', '#5be986', '#33e36d']
    }
  },
  series: []
};
const mixin = {
  mounted() {
    this.getBaseData();
  },
  data() {
    return {
      order: {
        search: {
          timeRange: null,
          timeRangeType: "day"
        },
        statistics: []
      },
      orderDistributed: {
        search: {
          timeRange: null,
          timeRangeType: "day"
        },
        data: []
      },
      transcation: {
        search: {
          timeRange: null,
          timeRangeType: "day"
        },
        visitors: 0,
        orders: 0,
        pays: 0
      },
      overall: {
        cumulative_turnover: 0,
        pay_order_count: 0,
        member_count: 0,
        pay_member_count: 0,
        wait_pay: 0,
        wait_pay_price: 0,
        wait_send: 0,
        refund_success_price: 0
      },
      footPrintPluginTurnedon: false
    }
  },
  methods: {
    getBaseData() {
      this.fetchData(GetOrderDataUrl).then(res => {
        this.overall = res.cumulative_data
        this.footPrintPluginTurnedon = Boolean(res.browse_footprint);

        ordersChart = echarts.init(this.$refs['ordersChart']);
        ordersChart.setOption(ordersChartOption);
        this.getOrderStaisticsData();

        orderDistributedChart = echarts.init(this.$refs['orderDistributedChart']);
        this.$http.get(chinaJsonUrl).then(async res => {
          echarts.registerMap("China", res.data);
          orderDistributedChart.setOption(orderDistributedChartOption);
          this.getOrderDistributedData();
        });

        if (this.footPrintPluginTurnedon) {
          this.$nextTick(() => {
            transcationChart = echarts.init(this.$refs['transcationChart']);
            transcationChart.setOption(transcationChartOption);
            this.getOrderTranscationData();
          })
        }
      });
    },
    getOrderStaisticsData() {
      ordersChart.showLoading();
      this.fetchData(GetOrderChartDataUrl, {
        time_type: this.order.search.timeRangeType,
        time: this.order.search.timeRange
      }).then(data => {
        let statistics = [];
        const series = [];
        let legendData = [];
        data.forEach(item => {
          legendData.push(item.name);
          statistics.push({
            name: item.name,
            count: item.search,
            tip: item.tips,
            decimals: this.getDecimals(item.search)
          });
          series.push({
            name: item.name,
            type: "line",
            data: item.series,
          })
        });
        ordersChart.setOption({
          legend: {
            data: legendData,
          },
          xAxis: {
            data: data[0]['x_axis']
          },
          series
        });
        this.order.statistics = statistics;
        ordersChart.hideLoading();
      });
    },
    orderSearchTimeRange(timeRange) {
      this.order.search = timeRange;
      timeRange.timeRange = timeRange.timeRange ? timeRange.timeRange / 1000 : null;
      this.getOrderStaisticsData();
    },
    orderDistributedSearchTimeRange(timeRange) {
      this.orderDistributed.search = timeRange;
      timeRange.timeRange = timeRange.timeRange ? timeRange.timeRange / 1000 : null;
      this.getOrderDistributedData();
    },
    getOrderDistributedData() {
      orderDistributedChart.showLoading();
      this.fetchData(GetOrderDistributionUrl, {
        time_type: this.orderDistributed.search.timeRangeType,
        time: this.orderDistributed.search.timeRange
      }).then(res => {
        this.orderDistributed.data = res.distribution;
        let maxValue = res.area[0] ? res.area[0]['value'] : 1000;
        res.area.forEach(item => {
          if (item.value > maxValue) {
            maxValue = item.value;
          }
        })
        orderDistributedChart.setOption({
          visualMap: {
            max: maxValue,
          },
          series: [
            {
              name: '',
              type: 'map',
              geoIndex: 0,
              map: 'China',
              data: [
                ...res.area
              ],
              showLegendSymbol: true,
            },
            // {
            //   name: '南海诸岛',
            //   type: 'map',
            //   geoIndex: 1,
            //   zoom: 0.3,
            //   top: 255,
            //   left: 700,
            //   map: 'ChinaNanhaiIslands',
            //   data: [],
            // }
          ]
        })
        orderDistributedChart.hideLoading();
      });
    },
    transcationSearchTimeRange(timeRange) {
      this.transcation.search = timeRange;
      timeRange.timeRange = timeRange.timeRange ? timeRange.timeRange / 1000 : null;
      this.getOrderTranscationData();
    },
    getOrderTranscationData() {
      transcationChart.showLoading();
      this.fetchData(GetTranscationDataUrl, {
        time_type: this.transcation.search.timeRangeType,
        time: this.transcation.search.timeRange
      }).then(res => {
        this.transcation.orders = res.order_count;
        this.transcation.visitors = res.cookie_count;
        this.transcation.pays = res.pay_order_count;

        let chart = res.chart;
        let legend = [];
        let XAxis = chart[0]['x_axis'];
        let series = [];
        chart.forEach(item => {
          series.push({
            name: item['name'],
            type: 'line',
            data: item['series']
          });
          legend.push(item['name']);
        })
        transcationChart.setOption({
          legend: {
            data: legend
          },
          xAxis: {
            data: XAxis
          },
          series
        })
        transcationChart.hideLoading();
      });
    }
  }
}