lichebao/pages/dataAnalysis/index.js

import _ from '../../commons/js/commons'
import popularData from '../../commons/js/lib/popularData';
import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
const app = getApp()
Page({
  data: {
    imgUrl:_.config.imgUrl,

    storearray: ['厦门店', '泉州店', '福州店', ],
    storeobj: [
      {
        id: 0,
        name: '厦门店'
      },
      {
        id: 1,
        name: '泉州店'
      },
      {
        id: 2,
        name: '福州店'
      },
    ],
    storeIndex:0,

    staffarray: ['张三', '李四', '王五', ],
    staffobj: [
      {
        id: 0,
        name: '张三'
      },
      {
        id: 1,
        name: '李四'
      },
      {
        id: 2,
        name: '王五'
      },
    ],
    staffIndex:-1,

    tabId:'1',
    tab:[
      {
        id: 1,
        title: '客户数据'
      },
      {
        id: 2,
        title: '订单数据'
      },
    ],

    custom:[
      {
        title:'订单客户',
        value:'12.23w',
        icon:'icon-statistics-custom-1',
      },
      {
        title:'到店客户',
        value:'15',
        icon:'icon-statistics-custom-2',
      },
      {
        title:'未见客户',
        value:'12.2',
        icon:'icon-statistics-custom-3',
      },
      {
        title:'未联潜客',
        value:'12.23',
        icon:'icon-statistics-custom-4',
      },
      {
        title:'战败客户',
        value:'9996',
        icon:'icon-statistics-custom-5',
      },
    ],
    order:[
      {
        title:'合同签订',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'分期办理',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'车辆确认',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'申请开票',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'待办服务',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'交付确认',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
      {
        title:'交付完成',
        value:'12.23w',
        icon:'icon-statistics-order-1',
      },
    ],

  },

  onLoad(options) {
    for (let key in options) {
      this.setData({
        [key]: options[key]
      })
    }
    popularData.getDateLater(0,0).then(res => {
      this.setData({
        dateTime:res[0],
      })
    })
    
    this.getBar()
    this.getLine()
  },

  onShow: function () {

  },

  //选择门店
  changeStore(e) {
    this.setData({
      storeIndex: e.detail.value
    })
  },

  //日期选择
  changeDate(e){
    this.setData({
      dateTime: e.detail.value,
    })
  },

  //选择人员
  changeStaff(e) {
    this.setData({
      staffIndex: e.detail.value
    })
  },

  //切换tab
  changeTab(e){
    this.setData({
      tabId:e.currentTarget.dataset.id,
    })
    //this.searchSubmit()
  },

  getBar(){
    this.setData({
      ecBar: {
        onInit: function (canvas, width, height, dpr) {
          const barChart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          canvas.setChart(barChart);
          barChart.setOption(getBarOption());
          return barChart;
        }
      },
    })
  },

  getLine(){
    this.setData({
      ecLine: {
        onInit: function (canvas, width, height, dpr) {
          const lineChart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          canvas.setChart(lineChart);
          lineChart.setOption(getLineOption());
          return lineChart;
        }
      }
    })
  },

  //推送链接
  pushLink(e) {
    if(e.currentTarget.dataset.url){
      _.$router.openUrlScheme(e.currentTarget.dataset.url)
    }
  },

  //页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
    
  },

})

function getBarOption() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '10%',
      left: '2%',
      right: '5%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['1月', '2月', '3月',],
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
          color:'#2e3246',
          borderRadius: [0, 20, 20, 0],
        },
        barWidth:'15',
        data: [33, 23, 29,],
        label: {
            show: true,
            position: 'right',
            formatter: '{@[n]}',
            valueAnimation: true
        }
      },
    ]
  };
}

function getLineOption() {

  return{
    grid: {
      top: '15%',
      left: '2%',
      right: '5%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月',]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [20, 932, 901,],
        type: 'line',
        smooth: true
    }]
  };
}