<template>
<div>
<div class="income" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { start } from 'nprogress'
export default {
name: 'Income',
data() {
return {
// currentRole: "adminDashboard",
mCharts: null,
screenWidth: null,
xDataArr: [],
engineIncome: [],
maintainIncome: [],
tableData3: [],
averageEngine: 0,
averageMaintain: 0,
currentPage: 1,
totalPage: 0
}
},
mounted() {
this.mCharts = echarts.init(document.querySelector('.income'), 'light')
// this.initData();
this.getInfo()
const that = this
window.addEventListener('resize', function(i) {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
})
},
destroyed() {
clearInterval(this.timerId)
// 在组件销毁的时候, 需要将监听器取消掉
// window.removeEventListener('resize')
},
methods: {
startInterval() {
if (this.timerId) {
clearInterval(this.timerId)
}
this.timerId = setInterval(() => {
this.currentPage++
if (this.currentPage > this.totalPage) {
this.currentPage = 1
}
this.initData()
}, 3000)
},
getInfo() {
this.xDataArr = []
this.engineIncome = []
this.maintainIncome = []
// this.mCharts.showLoading(
// {
// text: 'loading',
// color: 'red',
// textColor: 'red',
// maskColor: 'rgba(255, 255, 255, 0.2)',
// zlevel: 0,
// }
// ); // 在获取数据之前, 显示加载动画
this.xDataArr = []
this.echarts = []
this.maintainIncome = []
// const loadingRequestCount = 5
this.$http
.get(
'woas/census/chargeCensus?page=1&pageSize=10' +
'&area=' +
'' +
'&timeStart=' +
'' +
'&timeEnd=' +
'',
{
headers: {
isLoading: true
}
}
)
.then((response) => {
if (response.data.code === 200) {
this.mCharts.clear()
// this.mCharts.hideLoading();
var res = JSON.parse(JSON.stringify(response.data.result))
this.tableData3 = res
this.totalPage =
this.tableData3.length % 6 === 0
? this.tableData3.length / 6
: this.tableData3.length / 6 + 1
this.startInterval()
var index
for (index = 0; index < this.tableData3.length; index++) {
if (this.tableData3[index].maintainIncome === '') {
this.tableData3[index].maintainIncome = 0
}
if (this.tableData3[index].engineIncome === '') {
this.tableData3[index].engineIncome = 0
}
if (this.tableData3[index].maintainIncome === '') {
this.tableData3[index].maintainIncome = 0
}
if (this.tableData3[index].engineIncome === '') {
this.tableData3[index].engineIncome = 0
}
this.xDataArr.push(this.tableData3[index].month + '月')
this.engineIncome.push(this.tableData3[index].engineIncome)
this.maintainIncome.push(this.tableData3[index].maintainIncome)
}
var engineAll = 0
for (let index = 0; index < this.engineIncome.length; index++) {
engineAll += this.engineIncome[index]
}
this.averageEngine = engineAll / this.engineIncome.length
var maintainAll = 0
for (let index = 0; index < this.maintainIncome.length; index++) {
maintainAll += this.maintainIncome[index]
}
this.averageMaintain = maintainAll / this.maintainIncome.length
this.initData()
}
})
.catch((reason) => {
console.log(reason)
// this.$message({
// showClose: true,
// message: reason,
// type: 'error'
// })
})
},
initData() {
// var mcharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
// var xDataArr = [
// "张三",
// "李四",
// "王五",
// "闰土",
// "小明",
// "茅台",
// "二妞",
// "大强",
// ]; // 准备x轴数据
const start = (this.currentPage - 1) * 6
const end = this.currentPage * 6
const showData = this.tableData3.slice(start, end)
const month = showData.map((item) => {
return item.month + '月'
})
const engineIncome = showData.map((item) => {
return item.engineIncome
})
const maintainIncome = showData.map((item) => {
return item.maintainIncome
})
// var yDataArr = [77, 94, 80, 72, 88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
var option = {
// // animationDuration: function(arg){
// // return 2000 * arg
// // },
// animationEasing: "elasticOut", // 缓动动画
// animationThreshold: 7, // 动画元素的阈值
title: {
text: '★ 收入统计',
top: '10',
left: '10',
textStyle: {
color: 'white',
fontSize: '12'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} {a}'
},
grid: {
left: 50,
// top: 90,
height: '55%'
},
dataZoom: [
{
type: 'inside'
// yAxisIndex: [0],
}
],
legend: {
top: 10,
right: 10,
z: 100,
show: true,
// data:xDataArr
textStyle: {
// 图例文字的样式
color: '#ccc',
fontSize: 10
}
},
xAxis: {
type: 'category',
data: month,
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
interval: 0,
rotate: 40,
textStyle: {
// color: '#c3dbff', //更改坐标轴文字颜色
color: (value, index) => {
if (
this.engineIncome[index] > this.averageEngine &&
this.maintainIncome[index] > this.averageMaintain
) {
return 'white'
} else {
return 'red'
}
},
fontSize: 10 // 更改坐标轴文字大小
}
}
},
yAxis: {
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontSize: 10
}
},
type: 'value',
axisLine: {
lineStyle: {
color: 'white'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
animation: true, // 控制动画是否开启
animationDuration: 3000, // 动画的时长, 它是以毫秒为单位
name: '维保收入',
type: 'bar',
// label: {
// show: true,
// position: "top",
// textStyle: {
// color: "white",
// },
// },
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#06B5D7' }, // 柱图渐变色
// {offset: 0.5, color: '#44C0C1'}, //柱图渐变色
{ offset: 1, color: '#71C8B1' } // 柱图渐变色
])
},
emphasis: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#71C8B1' }, // 柱图高亮渐变色
{ offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
{ offset: 1, color: '#06B5D7' } // 柱图高亮渐变色
])
}
},
data: maintainIncome,
markPoint: {
symbolSize: '30',
label: {
fontSize: 10
},
// 标记点
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
],
symbol: 'pin'
},
markLine: {
// 标记线
data: [
{
type: 'average',
name: '平均值'
}
],
label: {
show: false
},
itemStyle: {
normal: {
show: false,
lineStyle: { type: 'solid' }
}
}
}
},
{
name: '工程收入',
type: 'bar',
// label: {
// show: true,
// position: "top",
// textStyle: {
// color: "white",
// },
// },
itemStyle: {
normal: {
barBorderRadius: [15, 15, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5052EE' }, // 柱图渐变色
// {offset: 0.5, color: '#44C0C1'}, //柱图渐变色
{ offset: 1, color: '#AB6EE5' } // 柱图渐变色
])
},
emphasis: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#71C8B1' }, // 柱图高亮渐变色
{ offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
{ offset: 1, color: '#06B5D7' } // 柱图高亮渐变色
])
}
},
// itemStyle: {
// normal: {
// //这里是重点
// color: function (params) {
// //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
// var colorList = [
// "#c23531",
// "#2f4554",
// "#61a0a8",
// "#d48265",
// "#91c7ae",
// "#749f83",
// "#ca8622",
// ];
// return colorList[params.dataIndex];
// },
// },
// },
markPoint: {
symbolSize: '30',
label: {
fontSize: 10
},
// 标记点
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
// 标记线
data: [
{
type: 'average',
name: '平均值'
}
],
label: {
show: false
},
itemStyle: {
normal: {
show: false,
lineStyle: { type: 'solid' }
}
}
},
data: engineIncome,
// showBackground: true,
backgroundStyle: {
color: 'rgba(51, 255, 0, 1)'
}
}
]
}
this.mCharts.on('mouseover', () => {
clearInterval(this.timerId)
})
this.mCharts.on('mouseout', () => {
this.startInterval()
})
this.mCharts.setOption(option)
// 这种方式监听屏幕宽度有时候不生效
window.onresize = () => {
}
}
}
}
</script>
<style scoped lang="less">
.income {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 33vh;
// overflow: scroll;
}
</style>
echarts
最新推荐文章于 2021-07-22 09:17:54 发布