930 lines
29 KiB
HTML
930 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>财务数据表</title>
|
||
<!-- 框架样式 -->
|
||
<link rel="stylesheet" href="css/reset.css" />
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
|
||
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.6/theme-chalk/index.min.css" />
|
||
<!-- 私有 -->
|
||
<link rel="stylesheet" href="css/index.css" />
|
||
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
|
||
<script src="https://cdn.staticfile.org/element-ui/2.15.6/index.js"></script>
|
||
<script src="js/echarts.js"></script>
|
||
<!-- 表格插件 -->
|
||
<!-- <link rel="stylesheet" href="https://unpkg.com/vue-easytable/libs/theme-default/index.css" /> -->
|
||
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/libs/theme-dark/index.css" />
|
||
<script src="https://unpkg.com/vue-easytable/libs/umd/index.js"></script>
|
||
<!-- 通用js方法 -->
|
||
<script src="js/axios.min.js"></script>
|
||
<script src="js/request.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/utils.js"></script>
|
||
<style>
|
||
/* 设置滚动条的样式 */
|
||
::-webkit-scrollbar {
|
||
width: 12px;
|
||
}
|
||
/* 滚动槽 */
|
||
::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
|
||
border-radius: 10px;
|
||
}
|
||
/* 滚动条滑块 */
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background-color: #4c4c4c;
|
||
/* background: rgba(0, 0, 0, 0.1); */
|
||
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
|
||
}
|
||
::-webkit-scrollbar-thumb:window-inactive {
|
||
/* background: rgba(255, 0, 0, 0.4); */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- <van-row class="title">
|
||
<van-col span="24">
|
||
<van-notice-bar speed="30" color="#D7D7D7" background="#000" left-icon="info-o"
|
||
>数据日期：{{ checkTime }}</van-notice-bar
|
||
>
|
||
</van-col>
|
||
</van-row> -->
|
||
<van-row class="title">
|
||
<van-col span="24">
|
||
<van-notice-bar
|
||
:scrollable="false"
|
||
speed="30"
|
||
color="#D7D7D7"
|
||
background="#000"
|
||
left-icon="info-o"
|
||
@click.native="selectTime"
|
||
>数据日期：{{ formatterTime }}</van-notice-bar
|
||
>
|
||
<!-- -->
|
||
<van-popup
|
||
closeable
|
||
close-icon="close"
|
||
v-model:show="Timeshow"
|
||
position="top"
|
||
:style="{ width: '100%',height:'40%' }"
|
||
>
|
||
<van-datetime-picker
|
||
@change="timeChange"
|
||
cancel-button-text=" "
|
||
confirm-button-text=" "
|
||
v-model="checkData"
|
||
type="date"
|
||
title="选择年月日"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
:formatter="formatter"
|
||
/>
|
||
</van-popup>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row class="">
|
||
<div class="button_group">
|
||
<p>{{ defaultDepName }}</p>
|
||
<van-button icon="filter-o" color="#aaa" @click="showPopup" size="mini">更改业务线</van-button>
|
||
</div>
|
||
<van-popup
|
||
closeable
|
||
close-icon="close"
|
||
v-model:show="show"
|
||
position="left"
|
||
:style="{ width: '80%',height:'100%' }"
|
||
>
|
||
<el-tree
|
||
ref="tree"
|
||
:data="depData"
|
||
:props="defaultProps"
|
||
node-key="itemid"
|
||
show-checkbox
|
||
:check-strictly="true"
|
||
check-on-click-node
|
||
:expand-on-click-node="false"
|
||
check-descendants
|
||
highlight-current
|
||
:default-expand-all="true"
|
||
:default-checked-keys="defaultDepData"
|
||
@check-change="handleCheckChange"
|
||
>
|
||
</el-tree>
|
||
</van-popup>
|
||
</van-row>
|
||
<div class="total">
|
||
<!-- <van-grid :column-num="2" square :gutter="12" :border="false">
|
||
<van-grid-item v-for="item in 2"> </van-grid-item>
|
||
</van-grid> -->
|
||
<van-grid square :gutter="2" :border="false">
|
||
<van-grid-item v-for="(item,index) in indicators[0]" :key="item+index">
|
||
<div style="white-space: nowrap" :ref="`txtRef-${index}`" :style="`${styleFormate(index)}`">
|
||
<p style="margin-bottom: 0.24rem; text-align: center; font-size: 16px; color: #d7d7d7; font-weight: bold">
|
||
{{ `${item.price.value}${item.price.unit}` }}
|
||
</p>
|
||
<p style="text-align: center; font-size: 13px; color: #aaa">{{ item.title }}</p>
|
||
</div>
|
||
</van-grid-item>
|
||
</van-grid>
|
||
</div>
|
||
<div class="table_group">
|
||
<div id="bar1" class="charst nowMon"></div>
|
||
<div>
|
||
<!-- border-color: #20323d :scroll-width="800"-->
|
||
<ve-table
|
||
style="width: 96vw; margin: 0 auto; border-radius: 5px"
|
||
:max-height="375"
|
||
:scroll-width="800"
|
||
:columns="nowMonColumns"
|
||
:table-data="nowMonTableData"
|
||
:fixed-header="true"
|
||
:border-around="true"
|
||
:border-x="true"
|
||
:border-y="true"
|
||
break-word
|
||
></ve-table>
|
||
</div>
|
||
</div>
|
||
<div class="table_group">
|
||
<div id="bar" class="charst nowDay"></div>
|
||
<div>
|
||
<ve-table
|
||
style="width: 96vw; margin: 0 auto; border-radius: 5px; border-color: #20323d"
|
||
:max-height="375"
|
||
:scroll-width="400"
|
||
:columns="nowDayColumns"
|
||
:table-data="nowDaytableData"
|
||
:fixed-header="true"
|
||
:border-around="true"
|
||
:border-x="true"
|
||
:border-y="true"
|
||
break-word
|
||
></ve-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script>
|
||
window.onload = function () {
|
||
var app = new Vue({
|
||
el: '#app',
|
||
mounted() {
|
||
// init, 获取数据
|
||
this._initData()
|
||
// 定时刷新数据
|
||
this.timer = setInterval(() => {
|
||
setTimeout(this._initData, 0)
|
||
}, 1000 * 60)
|
||
},
|
||
computed: {
|
||
formatterTime: function () {
|
||
let date = new Date(this.checkData)
|
||
var sep = '-'
|
||
var year = date.getFullYear() //获取完整的年份(4位)
|
||
var month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
|
||
var day = date.getDate() //获取当前日
|
||
if (month <= 9) {
|
||
month = '0' + month
|
||
}
|
||
if (day <= 9) {
|
||
day = '0' + day
|
||
}
|
||
var currentdate = year + sep + month + sep + day
|
||
return currentdate
|
||
},
|
||
},
|
||
data: {
|
||
timer: null, //定时器名称
|
||
checkTime: getCurrDate(), // 选中的时间
|
||
minDate: new Date(2019, 1, 1),
|
||
maxDate: new Date(getCurrDate()),
|
||
checkData: new Date(getCurrDate()),
|
||
nowData: [], // 接口获取的数据
|
||
depData: [], //事业部数据
|
||
indicators: [], // 八个指标项
|
||
defaultDepName: '总数据,软件业务,平台业务,投顾业务中心', // 顶部选中
|
||
// defaultDepData: [1, 2, 41, 14, 23, 42], //默认选中的事业部
|
||
defaultDepData: storage.getItem('defaultDepData') || [1, 2, 41, 23, 42],
|
||
defaultProps: {
|
||
// 树形结构定义
|
||
children: 'childItemTrees',
|
||
label: 'item',
|
||
},
|
||
// selected: '1',
|
||
show: false, //显示侧边业务线
|
||
Timeshow: false,
|
||
// 图标
|
||
//当日数据表头
|
||
nowDayColumns: [
|
||
{
|
||
field: 'depName',
|
||
title: '部门',
|
||
key: 'a',
|
||
align: 'center',
|
||
fixed: 'left',
|
||
width: '20%',
|
||
},
|
||
{
|
||
field: 'payprice',
|
||
key: 'b',
|
||
title: '收款金额',
|
||
align: 'center',
|
||
width: '20%',
|
||
},
|
||
{
|
||
field: 'Refundprice',
|
||
key: 'c',
|
||
title: '退款金额',
|
||
align: 'center',
|
||
width: '20%',
|
||
},
|
||
{
|
||
field: 'DepConsume',
|
||
key: 'd',
|
||
title: '渠道消费',
|
||
align: 'center',
|
||
width: '20%',
|
||
},
|
||
{
|
||
field: 'netPayprice',
|
||
key: 'e',
|
||
title: '实际收款金额',
|
||
align: 'center',
|
||
width: '20%',
|
||
},
|
||
],
|
||
// 当日数据
|
||
nowDaytableData: [],
|
||
// 当月数据表头
|
||
nowMonColumns: [
|
||
{
|
||
field: 'depName',
|
||
title: '部门',
|
||
key: 'a',
|
||
align: 'center',
|
||
fixed: 'left',
|
||
width: '15%',
|
||
},
|
||
{
|
||
field: 'monOrderNum',
|
||
title: '订单数',
|
||
key: 'b',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monPayprice',
|
||
title: '收款金额',
|
||
key: 'c',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monRefundOrderNum',
|
||
title: '退款订单数',
|
||
key: 'd',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monRefundprice',
|
||
title: '退款金额',
|
||
key: 'e',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monDepConsume',
|
||
title: '渠道消费金额',
|
||
key: 'f',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monNetOrderNum',
|
||
title: '实际收款订单数',
|
||
key: 'g',
|
||
align: 'center',
|
||
},
|
||
{
|
||
field: 'monNetPayprice',
|
||
title: '实际收款',
|
||
key: 'h',
|
||
align: 'center',
|
||
},
|
||
],
|
||
// 当日数据
|
||
nowMonTableData: [],
|
||
},
|
||
methods: {
|
||
// 时间筛选
|
||
selectTime() {
|
||
console.log('选时间')
|
||
this.Timeshow = true
|
||
},
|
||
timeChange() {
|
||
console.log('时间改变,触发更新', this.formatterTime)
|
||
this.getNowData(this.formatterTime).then((nowData) => {
|
||
console.log('时间改变nowData', nowData)
|
||
this.nowData = nowData
|
||
this.updateDate(this.defaultDepData)
|
||
})
|
||
},
|
||
//时间格式化
|
||
formatter(type, val) {
|
||
if (type === 'year') {
|
||
return val + '年'
|
||
}
|
||
if (type === 'month') {
|
||
return val + '月'
|
||
}
|
||
if (type === 'day') {
|
||
return val + '日'
|
||
}
|
||
return val
|
||
},
|
||
// 字体控制
|
||
styleFormate(index) {
|
||
this.$nextTick(() => {
|
||
const refObj = `txtRef-${index}`
|
||
const dom = this.$refs[refObj] // js可直接使用：this.$refs[refObj]
|
||
const width = dom[0].clientWidth
|
||
const parentWidth = dom[0].parentNode.clientWidth
|
||
const multNum = parentWidth / width
|
||
if (multNum < 1) {
|
||
const num = Math.floor(multNum * 100) / 100
|
||
const style = `transform:scale(${num});`
|
||
dom[0].style = style
|
||
}
|
||
})
|
||
},
|
||
_initData() {
|
||
console.log('初始化数据')
|
||
try {
|
||
if (this.depData.length == 0) {
|
||
this.getDep()
|
||
.then((depData) => {
|
||
this.depData = depData.result
|
||
// return this.getNowData()
|
||
return this.getNowData(this.formatterTime)
|
||
})
|
||
.then((nowData) => {
|
||
console.log(nowData)
|
||
this.nowData = nowData
|
||
this.updateDate(this.defaultDepData)
|
||
})
|
||
} else {
|
||
this.getNowData(this.formatterTime).then((nowData) => {
|
||
console.log(nowData)
|
||
this.nowData = nowData
|
||
this.updateDate(this.defaultDepData)
|
||
})
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
// 获取业务线
|
||
async getDep() {
|
||
const res = await GetDep()
|
||
console.log('业务线', res)
|
||
return res
|
||
},
|
||
showPopup() {
|
||
this.show = true
|
||
},
|
||
handleCheckChange(data, checked) {
|
||
// console.log(data.itemid, checked)
|
||
let res = this.$refs.tree.getCheckedNodes(),
|
||
checkList = []
|
||
console.log('tree----xxxx', res)
|
||
if (res.length > 0) {
|
||
res.forEach((child) => {
|
||
// console.log(child.itemid)
|
||
checkList.push(child.itemid)
|
||
})
|
||
}
|
||
storage.setItem('defaultDepData', checkList)
|
||
this.defaultDepData = checkList
|
||
// console.log(this.defaultDepData)
|
||
this.updateDate(this.defaultDepData)
|
||
},
|
||
updateDate(defaultDepData) {
|
||
// console.log(defaultDepData)
|
||
let MapResult = MapData(this.nowData, defaultDepData)
|
||
const { xAxis, nowDayMap, nowMonMap, nowDayTableData, nowMonTableData, indicators } = MapResult
|
||
this.nowDaytableData = nowDayTableData
|
||
this.nowMonTableData = nowMonTableData
|
||
this.drawDayCharst(xAxis, nowDayMap)
|
||
this.drawMonCharst(xAxis, nowMonMap)
|
||
this.indicators = indicators
|
||
//更新选中事业部
|
||
console.log('更新', xAxis)
|
||
if (xAxis.length) {
|
||
if (xAxis.length <= 4) {
|
||
this.defaultDepName = xAxis.join(',')
|
||
} else {
|
||
this.defaultDepName = xAxis.slice(0, 4).join(',') + '等'
|
||
}
|
||
} else {
|
||
this.defaultDepName = '请选择业务线'
|
||
}
|
||
},
|
||
async getNowData(time = getCurrDate()) {
|
||
let res = await getNowData({ day: time })
|
||
console.log(res)
|
||
return res
|
||
},
|
||
drawDayCharst(xAxisData, nowDayMap) {
|
||
let myChartBar = echarts.init(document.getElementById('bar'))
|
||
const { payPriceList, RefundpriceList, DepConsumeList, netPaypriceList } = nowDayMap
|
||
// 配置展示头
|
||
var legendData = ['收款金额', '退款金额', '渠道消费', '实际收款金额'],
|
||
// 配置化信息
|
||
optData = [
|
||
{
|
||
name: '收款金额',
|
||
type: 'bar',
|
||
data: payPriceList,
|
||
// color: 'rgba(0,191,183,1)',
|
||
color: '#FE6C84',
|
||
},
|
||
{
|
||
name: '退款金额',
|
||
type: 'bar',
|
||
data: RefundpriceList,
|
||
// color: 'rgba(255,144,128,1)',
|
||
color: '#96CD43',
|
||
},
|
||
{
|
||
name: '实际收款金额',
|
||
type: 'bar',
|
||
data: netPaypriceList,
|
||
// color: 'rgba(234,244,99,1)',
|
||
color: '#AC0D27',
|
||
},
|
||
{
|
||
name: '渠道消费',
|
||
type: 'bar',
|
||
data: DepConsumeList,
|
||
color: '#E19C1F',
|
||
// color: 'rgba(234,244,194,1)',
|
||
},
|
||
]
|
||
let BarOption = {
|
||
backgroundColor: '#000',
|
||
title: {
|
||
show: true,
|
||
text: '当天收款明细表',
|
||
x: 'center',
|
||
y: '5',
|
||
textStyle: {
|
||
color: '#fff',
|
||
// fontWeight: 'nomal',
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
right: '5%',
|
||
top: '30%',
|
||
left: '5%',
|
||
bottom: '8%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
x: '4%',
|
||
top: '11%',
|
||
textStyle: {
|
||
color: '#aaa',
|
||
},
|
||
data: legendData,
|
||
// selected: {
|
||
// 订单数: false,
|
||
// },
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
// name: '月',
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
// color: '#01FCE3',
|
||
color: '#3B3E46',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true, //隐藏X轴刻度
|
||
},
|
||
axisLabel: {
|
||
interval: 0, //强制显示文字
|
||
rotate: 40,
|
||
show: true,
|
||
textStyle: {
|
||
// color: '#ebf8ac', //X轴文字颜色
|
||
// color: '#BCB844',
|
||
color: '#BCB844',
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
splitNumber: 0,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
// color: '#1db0d2',
|
||
color: '#3B3E46',
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#fff',
|
||
color: '#aaa',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
formatter: (value, index) => {
|
||
num = Number(value)
|
||
if (num == 0 || num <= 1) {
|
||
return num + ''
|
||
} else if (num > 1 && num < 10000) {
|
||
return num + ''
|
||
} else {
|
||
return num / 10000 + '万'
|
||
}
|
||
},
|
||
// formatter: (value, index) => {
|
||
// // console.log(formatterPrice(value))
|
||
// let res = formatterPrice(value)
|
||
// console.log('res=>', res)
|
||
// return `${res.value}${res.unit}`
|
||
|
||
// // return `${value / 10000}万`
|
||
// },
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'value',
|
||
// max: 100,
|
||
min: 0,
|
||
splitNumber: 0,
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#1db0d2',
|
||
// color: '#0a3256'
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#90979c',
|
||
color: '#fff',
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
align: 'right',
|
||
},
|
||
offset: 1,
|
||
axisLabel: {
|
||
formatter: (value, index) => {
|
||
// console.log('进来了吗', value)
|
||
return `${value}%`
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: (function () {
|
||
var result = []
|
||
optData.forEach(function (item) {
|
||
result.push({
|
||
name: item.name,
|
||
type: item.type,
|
||
data: item.data,
|
||
barMaxWidth: 10,
|
||
barGap: '10%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: item.color,
|
||
},
|
||
},
|
||
})
|
||
})
|
||
return result
|
||
})(),
|
||
}
|
||
myChartBar.setOption(BarOption)
|
||
//在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
|
||
// 如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
|
||
// 我们一般使用这个事件去做窗口大小与对应元素的大小适配
|
||
window.addEventListener('resize', () => {
|
||
// 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
|
||
myChartBar.resize()
|
||
})
|
||
},
|
||
drawMonCharst(xAxisData, nowMonMap) {
|
||
let myChartBar = echarts.init(document.getElementById('bar1'))
|
||
const {
|
||
monOrderNumList,
|
||
monPaypriceList,
|
||
monRefundOrderNumList,
|
||
monRefundpriceList,
|
||
monDepConsumeList,
|
||
monNetOrderNumList,
|
||
monNetPaypriceList,
|
||
} = nowMonMap
|
||
var legendData = [
|
||
'订单数',
|
||
'收款金额',
|
||
'退款订单数',
|
||
'退款金额',
|
||
'渠道消费金额',
|
||
'实际收款订单数',
|
||
'实际收款',
|
||
],
|
||
/**
|
||
'monOrderNum', title: '月订单数'
|
||
'monPayprice', title: '当月收款金额'
|
||
'monRefundOrderNum', title: '当月退款订单数'
|
||
'monRefundprice', title: '当月退款金额'
|
||
'monDepConsume', title: '当月渠道消费金额'
|
||
'monNetOrderNum', title: '当月实际收款订单数'
|
||
'monNetPayprice', title: '当月实际收款'
|
||
**/
|
||
optData = [
|
||
{
|
||
name: '订单数',
|
||
type: 'bar',
|
||
data: monOrderNumList,
|
||
yAxisIndex: 1,
|
||
color: '#3C87CD',
|
||
// color: 'rgba(0,191,183,1)',
|
||
},
|
||
{
|
||
name: '收款金额',
|
||
type: 'bar',
|
||
data: monPaypriceList,
|
||
yAxisIndex: 0,
|
||
color: '#FE6C84',
|
||
// color: 'rgba(0,191,83,1)',
|
||
},
|
||
{
|
||
name: '退款订单数',
|
||
type: 'bar',
|
||
data: monRefundOrderNumList,
|
||
yAxisIndex: 1,
|
||
color: '#4FB09A',
|
||
},
|
||
{
|
||
name: '退款金额',
|
||
type: 'bar',
|
||
data: monRefundpriceList,
|
||
yAxisIndex: 0,
|
||
color: '#96CD43',
|
||
},
|
||
{
|
||
name: '渠道消费金额',
|
||
type: 'bar',
|
||
data: monDepConsumeList,
|
||
yAxisIndex: 0,
|
||
color: '#6D50D4',
|
||
},
|
||
{
|
||
name: '实际收款订单数',
|
||
type: 'bar',
|
||
data: monNetOrderNumList,
|
||
yAxisIndex: 1,
|
||
color: '#B85185',
|
||
},
|
||
{
|
||
name: '实际收款',
|
||
type: 'bar',
|
||
data: monNetPaypriceList,
|
||
yAxisIndex: 0,
|
||
color: '#AC0D27',
|
||
},
|
||
]
|
||
let BarOption = {
|
||
backgroundColor: '#000',
|
||
title: {
|
||
show: true,
|
||
text: '当月收款明细表',
|
||
x: 'center',
|
||
y: '5',
|
||
textStyle: {
|
||
color: '#fff',
|
||
// fontWeight: 'italic',
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
right: '5%',
|
||
top: '30%',
|
||
left: '5%',
|
||
bottom: '8%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
x: '4%',
|
||
top: '11%',
|
||
textStyle: {
|
||
color: '#aaa',
|
||
},
|
||
data: legendData,
|
||
// selected: {
|
||
// 订单数: false,
|
||
// },
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
// name: '月',
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true, //隐藏X轴轴线
|
||
lineStyle: {
|
||
color: '#3B3E46',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true, //隐藏X轴刻度
|
||
},
|
||
axisLabel: {
|
||
interval: 0, //强制显示文字
|
||
rotate: 40,
|
||
show: true,
|
||
textStyle: {
|
||
color: '#BCB844', //X轴文字颜色
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
min: 0,
|
||
splitNumber: 0,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#3B3E46',
|
||
// color: '#0a3256'
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#90979c',
|
||
color: '#aaa',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
formatter: (value, index) => {
|
||
num = Number(value)
|
||
if (num == 0 || num <= 1) {
|
||
return num + ''
|
||
} else if (num > 1 && num < 10000) {
|
||
return num + ''
|
||
} else {
|
||
return num / 10000 + '万'
|
||
}
|
||
},
|
||
// formatter: (value, index) => {
|
||
// // console.log(formatterPrice(value))
|
||
// let res = formatterPrice(value)
|
||
// console.log('res=>', res)
|
||
// return `${res.value}${res.unit}`
|
||
|
||
// // return `${value / 10000}万`
|
||
// },
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'value',
|
||
// max: 100,
|
||
min: 0,
|
||
splitNumber: 0,
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#3B3E46',
|
||
// color: '#0a3256'
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#90979c',
|
||
color: '#aaa',
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
align: 'right',
|
||
},
|
||
offset: 1,
|
||
axisLabel: {
|
||
formatter: (value, index) => {
|
||
// console.log('进来了吗', value)
|
||
return `${value}份`
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: (function () {
|
||
var result = []
|
||
optData.forEach(function (item) {
|
||
result.push({
|
||
name: item.name,
|
||
type: item.type,
|
||
data: item.data,
|
||
yAxisIndex: item.yAxisIndex,
|
||
barMaxWidth: 10,
|
||
barGap: '10%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: item.color,
|
||
},
|
||
},
|
||
})
|
||
})
|
||
return result
|
||
})(),
|
||
}
|
||
myChartBar.setOption(BarOption)
|
||
//在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
|
||
// 如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
|
||
// 我们一般使用这个事件去做窗口大小与对应元素的大小适配
|
||
window.addEventListener('resize', () => {
|
||
// 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
|
||
myChartBar.resize()
|
||
})
|
||
},
|
||
},
|
||
})
|
||
}
|
||
</script>
|
||
<script type="text/javascript">
|
||
var fontSize = 100
|
||
;(function (doc, win) {
|
||
var docEl = doc.documentElement,
|
||
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
|
||
recalc = function () {
|
||
var clientWidth = docEl.clientWidth
|
||
if (!clientWidth) return
|
||
if (clientWidth > 750) clientWidth = 750
|
||
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'
|
||
fontSize = 50 * (clientWidth / 375)
|
||
}
|
||
if (!doc.addEventListener) return
|
||
win.addEventListener(resizeEvt, recalc, false)
|
||
doc.addEventListener('DOMContentLoaded', recalc, false)
|
||
})(document, window)
|
||
</script>
|