parent
139b39fe12
commit
81c1be1ce5
@ -1,60 +1,107 @@
|
||||
<!-- 拨付资金企业申请情况TOP5 -->
|
||||
<template>
|
||||
<div class="BJinsannianzijin">
|
||||
|
||||
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { top5Fund } from "@/api/jin_ji_hu/zijinbiao"
|
||||
import * as echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '50%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
tableData:[],
|
||||
tabHeader: 288,
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
props:{
|
||||
typeValue:{
|
||||
type:Number,
|
||||
default:1,
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
yearsChange:{
|
||||
type:Number,
|
||||
default:1,
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
center: ['50%', '80%'],
|
||||
radius: '100%',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 30,
|
||||
color: [
|
||||
[0.298, '#2d99e2'],
|
||||
[1, '#dce3ec'],
|
||||
],
|
||||
},
|
||||
watch:{
|
||||
typeValue:{
|
||||
handler(newVAlue){
|
||||
console.log(newVAlue);
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false },
|
||||
pointer: {
|
||||
offsetCenter: [0, '10%'],
|
||||
icon: 'path://M0,0 L0,-20 L5,-20 L5,-30 L15,-30 L15,-20 L20,-20 L20,0 Z', // 圆点 + 线 + 三角形
|
||||
length: '80%', // 调整长度
|
||||
itemStyle: {
|
||||
color: '#000',
|
||||
width: 2, // 设置指针粗细
|
||||
},
|
||||
yearsChange:{
|
||||
handler(newVAlue){
|
||||
console.log(newVAlue);
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, '25%'],
|
||||
textStyle: {
|
||||
color: '#2d99e2',
|
||||
fontSize: 15,
|
||||
fontFamily: '微软雅黑',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.cancalDebounce();
|
||||
window.addEventListener('resize', this.cancalDebounce);
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
methods:{
|
||||
// 获取top5列表
|
||||
data: [
|
||||
{
|
||||
value: 29.8,
|
||||
name: '你要的比例 29.8%',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 屏幕尺寸变化
|
||||
cancalDebounce(){
|
||||
const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素
|
||||
const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素
|
||||
const elementHeight = element.offsetHeight;
|
||||
const headerHeight = header.offsetHeight;
|
||||
this.tabHeader = elementHeight - headerHeight - 35;
|
||||
this.chart.setOption(
|
||||
option
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue