add 全院经营数据统计(累计)-比对
This commit is contained in:
danshihao
@@ -4,6 +4,7 @@
|
|||||||
<!-- echarts-->
|
<!-- echarts-->
|
||||||
<div class="title">全院经营数据统计 (累计)
|
<div class="title">全院经营数据统计 (累计)
|
||||||
<j-year-date style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
|
<j-year-date style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
|
||||||
|
<a-button type="link" style="margin-left: 8px;" @click="handleComparison">比对</a-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="echarts-box" id="singleMonthTotalEcharts"></div>
|
<div class="echarts-box" id="singleMonthTotalEcharts"></div>
|
||||||
<!-- echarts-->
|
<!-- echarts-->
|
||||||
@@ -39,6 +40,8 @@
|
|||||||
</a-table>
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表格区域end -->
|
<!-- 表格区域end -->
|
||||||
|
<!-- 比对弹框 -->
|
||||||
|
<single-month-total-comparison-modal ref="singleMonthTotalComparisonModal"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -72,6 +75,7 @@ import {MonthDataTotal} from '@views/statisticalReport/statisticData'
|
|||||||
import {getAction} from '@api/manage'
|
import {getAction} from '@api/manage'
|
||||||
import {formatMoney} from '@/utils/formatMoney'
|
import {formatMoney} from '@/utils/formatMoney'
|
||||||
import JYearDate from '@comp/jero/JYearDate'
|
import JYearDate from '@comp/jero/JYearDate'
|
||||||
|
import SingleMonthTotalComparisonModal from '@views/dashboard/modules/SingleMonthTotalComparisonModal'
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
@@ -96,6 +100,7 @@ MonthDataTotal.map(tt => {
|
|||||||
export default {
|
export default {
|
||||||
name: 'SingleMonthEcharts',
|
name: 'SingleMonthEcharts',
|
||||||
components:{
|
components:{
|
||||||
|
SingleMonthTotalComparisonModal,
|
||||||
JYearDate
|
JYearDate
|
||||||
},
|
},
|
||||||
mixins: [JeroListMixin],
|
mixins: [JeroListMixin],
|
||||||
@@ -120,6 +125,10 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatMoney,
|
formatMoney,
|
||||||
|
// 比对
|
||||||
|
handleComparison () {
|
||||||
|
this.$refs.singleMonthTotalComparisonModal.open()
|
||||||
|
},
|
||||||
loadData(arg) {
|
loadData(arg) {
|
||||||
if (!this.url.list) {
|
if (!this.url.list) {
|
||||||
this.$message.error('请设置url.list属性!')
|
this.$message.error('请设置url.list属性!')
|
||||||
|
|||||||
@@ -0,0 +1,655 @@
|
|||||||
|
<template>
|
||||||
|
<j-modal
|
||||||
|
:title="title"
|
||||||
|
:width="width"
|
||||||
|
:visible="visible"
|
||||||
|
:confirmLoading="confirmLoading"
|
||||||
|
switchFullscreen
|
||||||
|
fullscreen
|
||||||
|
:footer="null"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
cancelText="关闭">
|
||||||
|
<a-spin :spinning="confirmLoading">
|
||||||
|
|
||||||
|
<!-- 查询区域-start -->
|
||||||
|
<div class="table-page-search-wrapper">
|
||||||
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||||
|
<a-row type="flex">
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-form-item label="比对年份1" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||||
|
<j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份1" v-model="queryParam.year1"></j-year-date>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<a-form-item label="比对年份2" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||||
|
<j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份2" v-model="queryParam.year2"></j-year-date>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="4">
|
||||||
|
<a-button type="primary" @click="searchQuery">比对</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
<!-- /查询区域-end-->
|
||||||
|
|
||||||
|
<!-- echart-start -->
|
||||||
|
<div class="echarts-box" ref="singleMonthTotalEcharts"></div>
|
||||||
|
<!-- echart-end -->
|
||||||
|
|
||||||
|
<!-- 表格区域beign -->
|
||||||
|
<div style="width: 100%">
|
||||||
|
<a-table
|
||||||
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
bordered
|
||||||
|
rowKey="projectId"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{x: 1100}"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="false"
|
||||||
|
class="j-table-force-nowrap main-table">
|
||||||
|
|
||||||
|
<template slot="text" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ text }}</template>
|
||||||
|
<div class="table-text">{{ text }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="allMoney" slot-scope="text">
|
||||||
|
<a-tooltip>
|
||||||
|
<template slot="title">{{ formatMoney(text) }}</template>
|
||||||
|
<div class="table-text">{{ formatMoney(text) }}</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- 表格区域end -->
|
||||||
|
</a-spin>
|
||||||
|
</j-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import JYearDate from '@comp/jero/JYearDate'
|
||||||
|
import {MonthDataTotal} from '@views/statisticalReport/statisticData'
|
||||||
|
import * as echarts from 'echarts/core'
|
||||||
|
import {
|
||||||
|
DatasetComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
TransformComponent,
|
||||||
|
ToolboxComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import {LineChart} from 'echarts/charts'
|
||||||
|
import {CanvasRenderer} from 'echarts/renderers'
|
||||||
|
import {UniversalTransition} from 'echarts/features'
|
||||||
|
import {getAction} from '@api/manage'
|
||||||
|
import {formatMoney} from '@/utils/formatMoney'
|
||||||
|
|
||||||
|
echarts.use([
|
||||||
|
DatasetComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
TransformComponent,
|
||||||
|
LineChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
UniversalTransition,
|
||||||
|
ToolboxComponent
|
||||||
|
])
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '',
|
||||||
|
align: 'center',
|
||||||
|
width: 160,
|
||||||
|
dataIndex: 'indexName',
|
||||||
|
scopedSlots: {customRender: 'text'}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
MonthDataTotal.map(tt => {
|
||||||
|
columns.push({
|
||||||
|
title: tt.name,
|
||||||
|
align: 'center',
|
||||||
|
width: 125,
|
||||||
|
dataIndex: tt.key,
|
||||||
|
scopedSlots: {customRender: 'allMoney'}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SingleMonthTotalComparisonModal',
|
||||||
|
components: {JYearDate},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
title: '比对',
|
||||||
|
width: 800,
|
||||||
|
visible: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
labelCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 5 }
|
||||||
|
},
|
||||||
|
wrapperCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 10 }
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
list: '/index/cumulativeGraphList'
|
||||||
|
},
|
||||||
|
// echarts实例
|
||||||
|
myChart: null,
|
||||||
|
// 年份1的echarts数据
|
||||||
|
echartsData1: {},
|
||||||
|
// 年份2的echarts数据
|
||||||
|
echartsData2: {},
|
||||||
|
queryParam: {},
|
||||||
|
dataSource: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatMoney,
|
||||||
|
// 查询
|
||||||
|
searchQuery () {
|
||||||
|
const { year1, year2 } = this.queryParam
|
||||||
|
// 两个年份不能为空
|
||||||
|
if (!year1) {
|
||||||
|
this.$message.warning('请选择比对年份1')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!year2) {
|
||||||
|
this.$message.warning('请选择比对年份2')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 两个年份不能相同
|
||||||
|
if (year1 === year2) {
|
||||||
|
this.$message.warning('比对年份不能相同')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
// 加载数据
|
||||||
|
loadData() {
|
||||||
|
if (!this.url.list) {
|
||||||
|
this.$message.error('请设置url.list属性!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.confirmLoading = true
|
||||||
|
// 比对两个年份两次请求
|
||||||
|
Promise.all([
|
||||||
|
getAction(this.url.list, { year: this.queryParam.year1 }),
|
||||||
|
getAction(this.url.list, { year: this.queryParam.year2 }),
|
||||||
|
]).then(resArr => {
|
||||||
|
if (resArr[0].success && resArr[1].success) {
|
||||||
|
let dataSource1 = resArr[0].result || []
|
||||||
|
let dataSource2 = resArr[1].result || []
|
||||||
|
const {year1, year2} = this.queryParam
|
||||||
|
// 树形结构的数据 ，修改成table可以直接展示的数据，默认每年份只有四行数据
|
||||||
|
let tableData = [
|
||||||
|
// 年份1
|
||||||
|
{indexName: `${year1}年预估收入金额`},
|
||||||
|
{indexName: `${year1}年确认收入金额`},
|
||||||
|
{indexName: `${year1}年开票金额`},
|
||||||
|
{indexName: `${year1}年到账金额`},
|
||||||
|
// 年份2
|
||||||
|
{indexName: `${year2}年预估收入金额`},
|
||||||
|
{indexName: `${year2}年确认收入金额`},
|
||||||
|
{indexName: `${year2}年开票金额`},
|
||||||
|
{indexName: `${year2}年到账金额`},
|
||||||
|
]
|
||||||
|
// 年份1的数据
|
||||||
|
dataSource1.map((item, index) => {
|
||||||
|
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
|
||||||
|
if (keyItem) {
|
||||||
|
let key = keyItem.key
|
||||||
|
tableData[0][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
|
||||||
|
// tableData[0][key] = item.allMoney // 年度待确收金额
|
||||||
|
tableData[1][key] = item.confirmAmount // 确认收入金额
|
||||||
|
tableData[2][key] = item.billMoney // 开票金额
|
||||||
|
tableData[3][key] = item.comeAllMoney // 到账金额
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 年份2的数据
|
||||||
|
dataSource2.map((item, index) => {
|
||||||
|
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
|
||||||
|
if (keyItem) {
|
||||||
|
let key = keyItem.key
|
||||||
|
tableData[4][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
|
||||||
|
// tableData[0][key] = item.allMoney // 年度待确收金额
|
||||||
|
tableData[5][key] = item.confirmAmount // 确认收入金额
|
||||||
|
tableData[6][key] = item.billMoney // 开票金额
|
||||||
|
tableData[7][key] = item.comeAllMoney // 到账金额
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 初始化年份1的echarts数据
|
||||||
|
this.initEchartsData(resArr[0].result, '1')
|
||||||
|
// 初始化年份2的echarts数据
|
||||||
|
this.initEchartsData(resArr[1].result, '2')
|
||||||
|
// 初始化 echarts
|
||||||
|
this.initEcharts()
|
||||||
|
this.dataSource = tableData
|
||||||
|
} else {
|
||||||
|
this.$message.warning(resArr[resArr[0].success ? 1 : 0].message)
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 将后端返回的数据 处理成 echarts需要的数据 格式
|
||||||
|
initEchartsData(data, suffix) {
|
||||||
|
this['echartsData' + suffix].confirmAmount = []
|
||||||
|
this['echartsData' + suffix].billMoney = []
|
||||||
|
this['echartsData' + suffix].comeAllMoney = []
|
||||||
|
this['echartsData' + suffix].estimatedArrivalMoney = []
|
||||||
|
data.map(item =>{
|
||||||
|
// this.echartsData.allMoney.push(item.allMoney)
|
||||||
|
this['echartsData' + suffix].confirmAmount.push(item.confirmAmount)
|
||||||
|
this['echartsData' + suffix].billMoney.push(item.billMoney)
|
||||||
|
this['echartsData' + suffix].comeAllMoney.push(item.comeAllMoney)
|
||||||
|
this['echartsData' + suffix].estimatedArrivalMoney.push(item.estimatedArrivalMoney)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
// 处理x轴数据
|
||||||
|
let xData = MonthDataTotal.reduce((pre, val) => {
|
||||||
|
return pre.concat(val.name)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
let chartDom = this.$refs.singleMonthTotalEcharts
|
||||||
|
let myChart = echarts.init(chartDom)
|
||||||
|
this.myChart = myChart
|
||||||
|
let option
|
||||||
|
const { year1, year2 } = this.queryParam
|
||||||
|
let legend = [
|
||||||
|
`${year1}年预估收入金额`,
|
||||||
|
`${year1}年确认收入金额`,
|
||||||
|
`${year1}年开票金额`,
|
||||||
|
`${year1}年到账金额`,
|
||||||
|
`${year2}年预估收入金额`,
|
||||||
|
`${year2}年确认收入金额`,
|
||||||
|
`${year2}年开票金额`,
|
||||||
|
`${year2}年到账金额`,
|
||||||
|
]
|
||||||
|
option = {
|
||||||
|
color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: params => {
|
||||||
|
// 获取xAxis data中的数据
|
||||||
|
let dataStr = ''
|
||||||
|
params.forEach(item => {
|
||||||
|
dataStr += `<div>
|
||||||
|
<div style="margin: 0 8px;">
|
||||||
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
|
||||||
|
<span style="color: #666">${item.seriesName}</span>
|
||||||
|
<span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legend,
|
||||||
|
right: '2%'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2.4%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#999999'
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
// 刻度线设置
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: xData
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f2f2f2'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#F5F5F5',
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#8E8E95'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// name: '年度待确收金额',
|
||||||
|
// type: 'line',
|
||||||
|
// showSymbol: false,
|
||||||
|
// symbol: 'circle',
|
||||||
|
// symbolSize: 8,
|
||||||
|
// data: this.echartsData.allMoney,
|
||||||
|
// itemStyle: {
|
||||||
|
// emphasis: {
|
||||||
|
// color: '#fff',//拐点颜色
|
||||||
|
// borderColor: '#1BCDC6',//拐点边框颜色
|
||||||
|
// borderWidth: 2//拐点边框大小
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// areaStyle: {
|
||||||
|
// opacity: 0.2,
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: '#1BCDC6'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: '#ffffff'
|
||||||
|
// }
|
||||||
|
// ])
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: legend[0],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData1.estimatedArrivalMoney,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {lineStyle:{type: 'dashed'}},
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#1BCDC6',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1BCDC6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[1],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData1.confirmAmount,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#EBAB91',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#EBAB91'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[2],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData1.billMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#9CB7F2',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9CB7F2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[3],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData1.comeAllMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#B6F1AC',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B6F1AC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[4],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData2.estimatedArrivalMoney,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {lineStyle:{type: 'dashed'}},
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#1BCDC6',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#1BCDC6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[5],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData2.confirmAmount,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#EBAB91',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#EBAB91'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[6],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData2.billMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#9CB7F2',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#9CB7F2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: legend[7],
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: this.echartsData2.comeAllMoney,
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
color: '#fff',//拐点颜色
|
||||||
|
borderColor: '#B6F1AC',//拐点边框颜色
|
||||||
|
borderWidth: 2//拐点边框大小
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.2,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#B6F1AC'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#ffffff'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
console.log('resize')
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCancel () {
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
open () {
|
||||||
|
this.visible = true
|
||||||
|
},
|
||||||
|
close () {
|
||||||
|
this.visible = false
|
||||||
|
this.myChart && this.myChart.dispose()
|
||||||
|
this.myChart = null
|
||||||
|
this.dataSource = []
|
||||||
|
this.echartsData1 = {}
|
||||||
|
this.echartsData2 = {}
|
||||||
|
this.queryParam = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.echarts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-thead tr > th {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
/deep/ .ant-table-tbody tr > td {
|
||||||
|
color: rgba(5, 5, 37, 0.8);
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-table-tbody tr > td:first-child {
|
||||||
|
color: #050525;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgb(245,245,246);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user