|
|
@@ -1,205 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="qfyhmonth" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)">
|
|
|
- <div class="smallTitle">{{title}}</div>
|
|
|
- <div class="userchart" ref="chart"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { GetQf3Data } from '@/api/dataBoard/misdata'
|
|
|
-import comMixins from '@/views/dataBoard/mixins/comMixins'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'qfyhmonth',
|
|
|
- props:{
|
|
|
-
|
|
|
- },
|
|
|
- mixins: [comMixins],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title:'欠费超过3个月的用户统计',
|
|
|
- seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
|
|
|
- loading:true,
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- },
|
|
|
- created(){
|
|
|
- this.GetQf3DataList()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * @desc
|
|
|
- */
|
|
|
- GetQf3DataList(){
|
|
|
- const that = this
|
|
|
- GetQf3Data({}).then((res) => {
|
|
|
- //console.log("GetQf3Data"+JSON.stringify(res))
|
|
|
- if(res.Code == 200){
|
|
|
-
|
|
|
- const rows = res.Result.rows
|
|
|
- if(rows.length>0){
|
|
|
- let chartData = {
|
|
|
- dataAry:[],
|
|
|
- sumMoney:0,
|
|
|
- seriesAry1:[],
|
|
|
- seriesAry2:[],
|
|
|
- }
|
|
|
- rows.forEach(item => {
|
|
|
- chartData.dataAry.push(item.JDCWRQ)
|
|
|
- chartData.seriesAry1.push(Number(item.QF3COUNT))
|
|
|
- chartData.sumMoney += item.QF3ZJE
|
|
|
- chartData.seriesAry2.push(that.accDiv(item.QF3ZJE,10000).toFixed(2) )
|
|
|
- });
|
|
|
-
|
|
|
- chartData.sumMoney = that.accDiv(chartData.sumMoney,10000).toFixed(2)
|
|
|
- that.drawChart(chartData)
|
|
|
- }else{
|
|
|
- that.drawNull(that.$refs.chart)
|
|
|
- }
|
|
|
- that.loading = false
|
|
|
- }else{
|
|
|
- //console.log("GetQf3Data："+res.Message)
|
|
|
- that.loading = false
|
|
|
- }
|
|
|
- }).catch((err) => {
|
|
|
- //console.log("GetQf3Data："+err)
|
|
|
- that.loading = false
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * @description 绘制图形
|
|
|
- */
|
|
|
- drawChart(chartData) {
|
|
|
- const chartReady = this.$echarts.init(this.$refs.chart)
|
|
|
- const options = {
|
|
|
- title: {
|
|
|
- text: '总欠费：'+chartData.sumMoney+'万元',
|
|
|
- textStyle:{
|
|
|
- color:'#A4D9F9',
|
|
|
- fontSize:'12'
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- // formatter: '{b0}<br />{a0}: {c0}'
|
|
|
- formatter: function (datas) {
|
|
|
- //console.log(JSON.stringify(datas))
|
|
|
- var res = datas[0].name + '<br/>'
|
|
|
- for (var i = 0, length = datas.length; i < length; i++) {
|
|
|
- res += datas[i].seriesName + '：' + datas[i].value + (i==0?'个':'万元') + ' <br/>'
|
|
|
- }
|
|
|
- return res
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- right:'0',
|
|
|
- textStyle:{
|
|
|
- color:'#A4D9F9'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top:'22%',
|
|
|
- left: '4%',
|
|
|
- right: '2%',
|
|
|
- bottom: '5%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: chartData.dataAry,// ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
|
|
- axisLabel: {
|
|
|
- color: '#A4D9F9'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- splitLine:{
|
|
|
- lineStyle:{
|
|
|
- color: "rgba(255, 255, 255, 0.24)"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // formatter: '{value} 个',
|
|
|
- color: '#A4D9F9'
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- splitLine:{
|
|
|
- lineStyle:{
|
|
|
- color: "rgba(255, 255, 255, 0.24)"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // formatter: '{value} 万元',
|
|
|
- color: '#A4D9F9'
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '欠费用户',
|
|
|
- type: 'bar',
|
|
|
- data: chartData.seriesAry1,
|
|
|
- barWidth:'36%',
|
|
|
- itemStyle: {
|
|
|
- color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#20AEFF' },
|
|
|
- { offset: 0.5, color: '#148DF9' },
|
|
|
- { offset: 1, color: '#0373F1' }
|
|
|
- ])
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '欠费金额',
|
|
|
- type: 'line',
|
|
|
- yAxisIndex: 1,
|
|
|
- data: chartData.seriesAry2,
|
|
|
- itemStyle: {
|
|
|
- color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#20AEFF' },
|
|
|
- { offset: 0.5, color: '#148DF9' },
|
|
|
- { offset: 1, color: '#0373F1' }
|
|
|
- ])
|
|
|
- },
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- chartReady.setOption(options)
|
|
|
-
|
|
|
- //自定义缩放
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- if(chartReady){
|
|
|
- chartReady.resize()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang='scss'>
|
|
|
- .qfyhmonth{
|
|
|
- width: calc(100% - 16px);
|
|
|
- height: calc(100% - 16px);
|
|
|
- position: relative;
|
|
|
- padding: 8px;
|
|
|
- // border: 1px yellow solid;
|
|
|
-
|
|
|
- .userchart{
|
|
|
- padding-top: 26px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 26px);
|
|
|
- // border: 1px red solid;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>>
|
zjz