lichebao/pages/storeData/subData/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()

let Pie1ChartData;
function Pie1Chart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  let option = Pie1ChartData
  chart.setOption(option);
  chart.on('click',function(e){
    console.log(e)
  });
  return chart;
}

Page({
  data: {
    imgUrl: _.config.imgUrl,//静态图片路径
    showPie1Chart:false,//是否显示Pie1图表
    ecPie1:{},
  },

  onLoad: function (options) {
    for (let key in options) {
      this.setData({
        [key]: options[key]
      })
    }
    this.getAppBizStats_customer_pid()
    
  },


  //选择日期
  changeDate(e){
    if(e.currentTarget.dataset.type=="s_date"){
      let begin = new Date(e.detail.value).getTime();
      let end = new Date(this.data.e_date).getTime();
      let day = 0
      if(end>=begin){
        day = (end - begin)/(24*60*60*1000);
        this.setData({
          s_date: e.detail.value,
        })
      }
      else{
        day = (begin - end)/(24*60*60*1000);
        let s_date = this.data.e_date
        let e_date = e.detail.value
        this.setData({
          s_date,
          e_date,
        })
      }
      if (day > 365) {
        wx.showToast({
          title: '请选择一年时间内',
          icon: 'none'
        })
      }
      else{
        this.getAppBizStats_customer_pid()
      }
    }
    if(e.currentTarget.dataset.type=="e_date"){
      let begin = new Date(this.data.s_date).getTime();
      let end = new Date(e.detail.value).getTime();
      let day = 0
      if(end>=begin){
        day = (end - begin)/(24*60*60*1000);
        this.setData({
          e_date: e.detail.value,
        })
      }
      else{
        day = (begin - end)/(24*60*60*1000);
        let e_date = this.data.s_date
        let s_date = e.detail.value
        this.setData({
          s_date,
          e_date,
        })
      }
      if (day > 365) {
        wx.showToast({
          title: '请选择一年时间内',
          icon: 'none'
        })
      }
      else{
        this.getAppBizStats_customer_pid()
      }
    }
    
  },

  //订单数据
  getAppBizStats_customer_pid(){
    this.setData({
      showPie1Chart:false,
    })

    let params = {};
    params['type'] = this.data.type;
    params['id'] = this.data.id;
    params['s_time'] = this.data.s_date;
    params['e_time'] = this.data.e_date;
    _.apiQuery.getAppBizStats_customer_pid(params).then(res => {

      wx.setNavigationBarTitle({
        title: res.data.title
      })

      // this.setData({
      //   Pie1title:res.data.title,
      // })
      if(res.data.series_data.length==0){
        this.setData({
          pie1noData:true,
        })
      }else{
        Pie1ChartData = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              bottom:'15%',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                fontSize:5,
                length:10
              },
              label: {
                formatter: '{b|  {b}  }{abg|}\n{hr|}\n{c|  {c}({d}%)  }',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize:10,
                    lineHeight:20,
                    align: 'center',
                  },
                  c: {
                    color: '#4C5058',
                    fontSize:8,
                    lineHeight:20,
                    align: 'center',
                  },
                }
              },
              data: []
            }
          ]
        };
        
        Pie1ChartData.series[0].data = res.data.series_data
        this.setData({
          pie1noData:false,
          showPie1Chart:true,
          ['ecPie1.onInit']:Pie1Chart,
        })
      }
      wx.stopPullDownRefresh()

    });
  },

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

})

function getPie1Option() {
  return {
    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{b}: {c} ({d}%)'
    // },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        bottom:'10%',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          fontSize:5,
          length:10
        },
        label: {
          formatter: '{b|  {b}  }{abg|}\n{hr|}\n{c|  {c}({d}%)  }',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize:10,
              lineHeight:20,
              align: 'center',
            },
            c: {
              color: '#4C5058',
              fontSize:8,
              lineHeight:20,
              align: 'center',
            },
          }
        },
        data: [
          { value: 48, name: '转介绍' },
          { value: 35, name: '网络推广' },
          { value: 30, name: '外展外拓' },
          { value: 21, name: '自媒体' },
        ]
      }
    ]
  };
}