cyb_configserver_com/wwwroot/skin/app/consumer/static/js/index.js

var abs = (val, showPoint = true) => {
  //金额转换  保留2位小数 并每隔3位用逗号分开 1,234.56
  let str = (val / 1).toFixed(2) + ''
  let intSum = str.substring(0, str.indexOf(".")).replace(/\B(?=(?:\d{3})+$)/g, ',') //取到整数部分
  let dot = str.substring(str.length, str.indexOf(".")) //取到小数部分搜索
  let ret = intSum + dot;
  return ret;
}
let timer = null;
let timer1 = null;
// 定义一个索引
let index = 0;
// 定义一个索引
let ind = 0;

var pietimer1, pietimer


//左上
function handle1(res) {
  if (res.data && res.data.length != 0) {
    $('#total').text(`累计新增创客 ${res.data[0].ckcount}`)
    $('#todayAdd').text(`累计新增商户 ${res.data[0].shcount}`)
  }
}

// 列表
function handle2(res_2) {
  $('.firstpanel').empty();
  for (var i = 0; i < res_2.data.length; i++) {
    const element = `<div class="row"> <span class="col">${res_2.data[i].activationTime}</span><span class="col">${res_2.data[i].productName}</span>
    <span class="col">${res_2.data[i].realname}</span>
    <span class="col">${res_2.data[i].count}</span>
    </div>`
    $('.firstpanel').append(element);
  };
}

// 左下
function handle3(res_1) {
  $('.year').text(`${new Date().getFullYear()}年`)
  if (res_1.data && res_1.data.length > 0) {

    $('.withdrawAmount').text(abs(res_1.data[0].withdrawAmount))
    $('.store-count').text(res_1.data[0].count)

    $('.yearsum').text(abs(res_1.data[0].yearsum))
    $('.yearcount').text(res_1.data[0].yearcount)

    $('.quartersum').text(abs(res_1.data[0].quartersum))
    $('.quartercount').text(res_1.data[0].quartercount)

    $('.monthsum').text(abs(res_1.data[0].monthsum))
    $('.monthcount').text(res_1.data[0].monthcount)

    $('.nowsum').text(abs(res_1.data[0].nowsum))
    $('.nowcount').text(res_1.data[0].nowcount)
  }
}

// 排行榜
function handle4(res_3, res_4, res_5) {
  if (res_3 || res_4 || res_5) {
    // console.log('handle4','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    let resArr = Array.of(res_3.data, res_4.data, res_5.data)

    resArr.map((res, i) => {
      // $(`.user-content${i}`).empty();
      res.map((item, index) => {
        let result = () => {
          if (item.openCount || item.openCount === 0) {
            return item.openCount
          }
          if (item.sum || item.sum === 0) {
            return abs(item.sum)
          }
        }
        $(`.user-content${i} .item${index} .name`).text(item.RealName ? item.RealName : item.realName);
        $(`.user-content${i} .item${index} .count`).text(result());
        // let element = `
        // <div class="item">
        //   <span class="name">${item.RealName}</span>
        //   <span class="count">${result()}</span>
        // </div>`
        // $(`.user-content${i}`).append(element);
      })
      // console.log(res_3);
    })
  }

}

//月度交易额环比
function handle5(res_10, res_11) {
  let present = (val) => {
    if (val.LastMonthTrade === 0) {
      return '100%'
    } else {
      return (val.ThisMonthTrade / val.LastMonthTrade * 100).toFixed(2) + '%'
    };
  }
  // let present_1 = (val) => {
  //   if(val.LastMonthTrade === 0){
  //     return '100%'
  //   }else{
  //     return (((val.ThisMonthTrade / val.LastMonthTrade) - 1) * 100).toFixed(2) + '%'
  //   };
  // }
  let present_add = (val) => {
    return (val.ThisMonthCount / val.LastMonthCount * 100).toFixed(2) + '%'
  }
  // let present_add_1 = (val) => {
  //   return (((val.ThisMonthCount / val.LastMonthCount) - 1) * 100).toFixed(2) + '%'
  // }
  if (res_10) {
    $('.mounthResult').text(present(res_10.data[0]));
    $('.thismonthsum').text(`${(res_10.data[0].ThisMonthTrade / 10000).toFixed(2)}`);
    $('.lastmonthsum').text(`${(res_10.data[0].LastMonthTrade / 10000).toFixed(2)}`);
    // $('.result').text(`${ present_1(res_10.data[0])}`);
  }

  if (res_11) {
    $('.addPresent').text(present_add(res_11.data[0]));
    $('.addSum').text(`${(res_11.data[0].ThisMonthCount).toFixed(0)}`);
    $('.addResult').text(`${(res_11.data[0].LastMonthCount).toFixed(0)}`);
    // $('.addResult').text(`${present_add_1(res_11.data[0])}`);
  }
}

// 右上折线图
function handle6(res_6, res_7) {
  // 定义数据
  let real_year = new Array(); //年Y轴数据
  let year_xAxis = new Array();
  let month_xAxis = new Array(); //14天x轴数据
  // let house_xAxis = new Array(); //一天x轴数据
  let real_14day = new Array(); //14天Y轴，真实数据
  // let real_house = new Array(); //1天Y轴，真实数据

  res_6.data.map((item) => {
    real_year.push((item.TradeAmount / 10000).toFixed(2))
    year_xAxis.push((item.TradeMonth.slice(-2) + '月'))
  });
  res_7.data.map((item) => {
    real_14day.push((item.TradeAmount / 10000).toFixed(2))
    month_xAxis.unshift(item.TradeDate + '日');
  })

  let data = {
    year: [
      [0],
      real_year
    ],
    month: [],
    quarter: [],
  };
  const chart = echarts.init(document.querySelector(".line"))
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // 向右距离边框10%
      right: '10%',
      textStyle: {
        color: '#4c9bfd'
      }
    },
    grid: {
      show: true, //显示边框
      borderColor: '#012f4a', //边框颜色
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '20%', // 距离上边20%
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: year_xAxis,
      axisLabel: {
        color: '#4c9bfd',
        fontSize: 9,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#4c9bfd',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a"
        }
      }
    },
    color: ['#00f2f1', '#ed3f35'],
    series: [{
      name: '实际交易额',
      type: 'line',
      stack: '总量',
      smooth: true,
      data: data.year[1],
    }]
  };
  chart.setOption(option);
  window.addEventListener('resize', function () {
    chart.resize();
  })
  if (!timer) {
    // 3.点击切换高亮并且切换折线图显示数据
    $(".sales .caption a").on('click', function () {
      // console.log('111000')
      option.series[0].data = [];
      // caption里面有5个元素，排序并不是以选取元素进行排序的
      index = $(this).index() - 1;
      if (index === 0) {
        data.year[1] = real_year
        option.xAxis.data = year_xAxis
      }
      if (index === 1) {
        option.xAxis.data = month_xAxis
        data.month[1] = real_14day
      }
      if (index === 2) {
        option.xAxis.data = house_xAxis
        data.quarter[1] = real_house
      };

      $(this).addClass("active").siblings("a").removeClass("active");
      // 在结构新增data-type属性，并赋值，通过新增属性获取属性值
      // const attr = $(this).attr('data-type')
      const attr = this.dataset.type
      // 通过新增属性值获取data对象里面的对应数据
      const arr = data[attr];
      option.series[0].data = arr[1];

      // 重新渲染option数据
      chart.setOption(option);
    })
    $(".point .filter a").on('click', function () {
      ind = $(this).index();
      // console.log('indeed', ind)
      $(this).addClass("active").siblings("a").removeClass("active");
      $(".point .data").eq(ind).show().siblings(".data").hide();
    })
    $(".sales").on('mouseover', function () {
      clearInterval(timer);
    })
    $(".point").on('mouseover', function () {
      clearInterval(timer1);
    })
    $(".sales").on('mouseout', function () {
      timer = setInterval(function () {
        // 定时器开启，索引自增
        index++;
        // 当索引值大于等于4，索引重新变为0
        if (index >= 3) {
          index = 0;
        }
        // 自动触发点击事件
        $(".sales .caption a").eq(index).click();
      }, 2000)
    })
    $(".point").on('mouseout', function () {
      timer1 = setInterval(function () {
        // 定时器开启，索引自增
        ind++;
        // 当索引值大于等于4，索引重新变为0
        if (ind >= 4) {
          ind = 0;
        }
        // 自动触发点击事件
        $(".point .filter a").eq(ind).click();
      }, 2000)
    })
    // 定义一个定时器
    timer1 = setInterval(function () {
      // 定时器开启，索引自增
      ind++;
      // 当索引值大于等于4，索引重新变为0
      if (ind >= 4) {
        ind = 0;
      }
      // 自动触发点击事件
      $(".point .filter a").eq(ind).click();
    }, 2000)
    // 定义一个定时器
    timer = setInterval(function () {
      // 定时器开启，索引自增
      index++;
      // 当索引值大于等于4，索引重新变为0
      if (index >= 3) {
        index = 0;
      }
      // 自动触发点击事件
      $(".sales .caption a").eq(index).click();
    }, 2000)
  }
};

// 半圆饼图1
function handle7(res_10) {
  const chart = echarts.init(document.querySelector(".quarter1 .gauge"));
  let present = 0;
  if (res_10.data[0].LastMonthTrade === 0) {
    present = 100;
  } else {
    present = (res_10.data[0].ThisMonthTrade / res_10.data[0].LastMonthTrade * 100).toFixed(2)
  }
  if (present > 100) {
    present = 100
  }
  const option = {
    series: [{
      color: ['skyblue', '#777'],
      name: '销售进度',
      type: 'pie',
      radius: ['130%', '150%'],
      center: ['48%', '80%'],
      label: {
        show: false
      },
      startAngle: 180,
      hoverOffset: 0,
      data: [{
          value: present,
          itemStyle: {
            // 颜色渐变#00c9e0->#005fc1
            color: new echarts.graphic.LinearGradient(
              // (x1,y2) 点到点 (x2,y2) 之间进行渐变
              0,
              0,
              0,
              1,
              [{
                  offset: 0,
                  color: "#00c9e0"
                }, // 0 起始颜色
                {
                  offset: 1,
                  color: "#005fc1"
                } // 1 结束颜色
              ]
            )
          }
        },
        {
          value: 100 - present,
          itemStyle: {
            color: '#12274d'
          }
        },
        {
          value: 100,
          itemStyle: {
            color: 'transparent'
          }
        },
      ],
      // silent: true
    }]
  };
  chart.setOption(option);
  window.addEventListener('resize', function () {
    chart.resize();
  })
};

// 半圆饼图2
function handle8(res_11) {
  const chart = echarts.init(document.querySelector(".quarter2 .gauge"));
  let present = (res_11.data[0].ThisMonthCount / res_11.data[0].LastMonthCount * 100).toFixed(2)
  if (present > 100) {
    present = 100
  }
  const option = {
    series: [{
      color: ['skyblue', '#777'],
      name: '销售进度',
      type: 'pie',
      radius: ['130%', '150%'],
      center: ['48%', '80%'],
      label: {
        show: false
      },
      startAngle: 180,
      hoverOffset: 0,
      data: [{
          value: present,
          itemStyle: {
            // 颜色渐变#00c9e0->#005fc1
            color: new echarts.graphic.LinearGradient(
              // (x1,y2) 点到点 (x2,y2) 之间进行渐变
              0,
              0,
              0,
              1,
              [{
                  offset: 0,
                  color: "#00c9e0"
                }, // 0 起始颜色
                {
                  offset: 1,
                  color: "#005fc1"
                } // 1 结束颜色
              ]
            )
          }
        },
        {
          value: 100 - present,
          itemStyle: {
            color: '#12274d'
          }
        },
        {
          value: 100,
          itemStyle: {
            color: 'transparent'
          }
        },
      ],
      // silent: true
    }]
  };
  chart.setOption(option);
  window.addEventListener('resize', function () {
    chart.resize();
  })
};


//饼图1
function handle9(res_12) {
  const chart = echarts.init(document.querySelector(".piebox1"));
  const option = {
    color: ['#536fc6', '#90cc74', '#f7c95a', '#ee6666', '#73bfdf', '#3ba372', '#fc8450', '#9a60b4', '#eb7acd'],
    title: {
      text: '开机量统计图',
      x: 'center',
      y: 'bottom',
      textStyle: {
        fontSize: '14',
        fontWeight: 'normal',
        color: '#fff',
      }
    },
    series: [{
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 1,
        textColor: '#fff'
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold',
          color: '#fff',
          formatter: "{aa|{d}}{bb|%}\n{cc|{b}}",
          rich: {
            bb: {
              color: '#fff'
            },
          }
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }]
  };

  res_12.data.map((item) => {
    option.series[0].data.push({
      value: item.count,
      name: item.name
    })
    option.series.name = item.name
    option.series[0].name = item.name
  })
  chart.setOption(option);
  window.addEventListener('resize', function () {
    chart.resize();
  })
  chart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    // dataIndex: lastIndex +1
  });
  chart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  });
  let currentIndex = -1
  clearInterval(pietimer)
  pietimer = setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    // 显示 tooltip
    // chart.dispatchAction({
    //   type: 'showTip',
    //   seriesIndex: 0,
    //   dataIndex: currentIndex
    // });
  }, 1500);
  // 处理点击事件并且跳转到相应的百度搜索页面
  chart.on('mouseover', function (params) {
    console.log('饼图进事件', params)
    clearInterval(pietimer)
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    });
  });
  chart.on('mouseout', function (params) {
    console.log('饼图出事件', params)
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    currentIndex = params.dataIndex
    clearInterval(pietimer)
    pietimer = setInterval(function () {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      // 显示 tooltip
      // chart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: currentIndex
      // });
    }, 1500);
  });
};


//饼图2
function handle10(res_13) {
  const chart = echarts.init(document.querySelector(".piebox2"));
  const option = {
    color: ['#536fc6', '#90cc74', '#f7c95a', '#ee6666', '#73bfdf', '#3ba372', '#fc8450', '#9a60b4', '#eb7acd'],
    title: {
      text: '交易量统计图',
      x: 'center',
      y: 'bottom',
      textStyle: {
        fontSize: '14',
        fontWeight: 'normal',
        color: '#fff',
      }
    },
    series: [{
      name: 'Access From',
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 1,
        textColor: '#fff'
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold',
          color: '#fff',
          formatter: "{aa|{d}}{bb|%}\n{cc|{b}}",
          rich: {
            bb: {
              color: '#fff',
            },
          }
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }]
  };

  res_13.data.map((item) => {
    option.series[0].data.push({
      value: item.sum,
      name: item.name
    })
  })
  chart.setOption(option);
  window.addEventListener('resize', function () {
    chart.resize();
  })

  chart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    // dataIndex: lastIndex +1
  });
  chart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  });
  let currentIndex = -1
  clearInterval(pietimer1)
  pietimer1 = setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    // 显示 tooltip
    // chart.dispatchAction({
    //   type: 'showTip',
    //   seriesIndex: 0,
    //   dataIndex: currentIndex
    // });
  }, 1500);
  // 处理点击事件并且跳转到相应的百度搜索页面
  chart.on('mouseover', function (params) {
    console.log('饼图进事件', params)
    clearInterval(pietimer1)
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    });
  });
  chart.on('mouseout', function (params) {
    console.log('饼图出事件', params)
    chart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
    });
    currentIndex = params.dataIndex
    clearInterval(pietimer1)
    pietimer1 = setInterval(function () {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      // 显示 tooltip
      // chart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: currentIndex
      // });
    }, 1500);
  });
}