1809 lines
58 KiB
Vue
1809 lines
58 KiB
Vue
<template>
|
||
<!-- 食品学院大屏 -->
|
||
<div class="container bg ScaleBox" ref="ScaleBox" :style="{
|
||
width: width + 'px',
|
||
height: height + 'px',
|
||
}">
|
||
<!-- 头部标题 -->
|
||
<div class="header" style="padding-top: 20px;">
|
||
<div class="header-left" style="padding-left: 180px; display: flex;">
|
||
<img class="logo" src="./assets/logo.png" style="width: 331px;height: 60px;padding-left: 60px;">
|
||
</div>
|
||
<div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
|
||
<div style="flex:0 1 25%">
|
||
<dv-decoration-10 style="height:5px;" />
|
||
</div>
|
||
<div style="flex:0 1 50%">
|
||
<div class="d-flex">
|
||
<dv-decoration-8 style="height:50px;flex:1;" />
|
||
<h2 style="width: 260px;font-size: 17px;">北京工商大学科研驾驶舱</h2>
|
||
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
|
||
</div>
|
||
</div>
|
||
<div style="flex:0 1 25%">
|
||
<dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
|
||
</div>
|
||
</div>
|
||
<div class="header-right">
|
||
|
||
</div>
|
||
</div>
|
||
<!-- 主体 -->
|
||
<div class="main">
|
||
<!-- 左侧第一块 -->
|
||
<div class="box">
|
||
<!-- 左侧标题 -->
|
||
<div class="box-header" style="">
|
||
<span style=""></span>
|
||
科研经费
|
||
</div>
|
||
<!-- 左侧内容 -->
|
||
<div class=" box-body">
|
||
<!-- 第一行3块 三等分flex布局-->
|
||
<div class="charts-row" style="">
|
||
<!-- left1 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left1Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left1Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in left1Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- left2 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left2Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left2Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in left2Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- left3 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left3Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in left3Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in left3Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行 -->
|
||
<div class="charts-row" style="">
|
||
<!-- left4 -->
|
||
<div style="flex:0 1 100%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left4Title }}</h3>
|
||
<div ref="left4Container" style="width:100%; height: 100%;margin: 1px"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三行 -->
|
||
<div class="charts-row" style="justify-content: center;">
|
||
<!-- left5 -->
|
||
<div style="flex:1;overflow: hidden;">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left5Title }}</h3>
|
||
<div style="display: flex;justify-content: center;align-items: center;">
|
||
<dv-scroll-board :config="left5Config" style="width:95%;height:220px;" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- left6 -->
|
||
<div style="flex:1;">
|
||
<dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left6Title }}</h3>
|
||
<div ref="left6Container" style="height:90%;width:100%"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- left7 -->
|
||
<div style="flex:1;">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ left7Title }}</h3>
|
||
<div ref="left7Container" style="height:90%;width:100%"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间第二块 -->
|
||
<div class="box">
|
||
<!-- 标题 -->
|
||
<div class="box-header" style="">
|
||
<span style=""></span>
|
||
中屏总览
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="box-body">
|
||
<div class="charts-row">
|
||
<div style="flex:0 1 25%">
|
||
<!-- middle1 -->
|
||
<dv-border-box-13 style="width:100%;height:200px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle1Title }}</h3>
|
||
<div style="display: flex;justify-content: space-evenly;align-items: center;font-size: 10px;">
|
||
<dv-decoration-9 style="width:120px;height:120px;" dur=5 v-for="item in middle1Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-evenly;text-align: center;">
|
||
<span style="width:120px;height:30px;" v-for="item in middle1Data">{{ item[0] }}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
<!-- middle4 -->
|
||
<dv-border-box-13 style="width:100%;height:400px;padding-top: 10px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle4Title }}</h3>
|
||
<div ref="middle4" style="height:80%;width:100%"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- middle2 -->
|
||
<div style="flex:0 1 50%">
|
||
<dv-border-box-1 style="width:100%;height:600px;">
|
||
<iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px"
|
||
scrolling="no"></iframe>
|
||
</dv-border-box-1>
|
||
</div>
|
||
<div style="flex:0 1 25%">
|
||
<!-- middle3 -->
|
||
<dv-border-box-13 style="width:100%;height:200px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle3Title }}</h3>
|
||
<div style="display: flex;justify-content: space-evenly;align-items: center;font-size: 10px;">
|
||
<dv-decoration-9 style="width:120px;height:120px;" dur=5 v-for="item in middle3Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-evenly;text-align: center;">
|
||
<span style="width:120px;height:30px;" v-for="item in middle3Data">{{ item[0] }}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
<!-- middle5飞线 -->
|
||
<dv-border-box-13 style="width:100%;height:400px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle5Title }}</h3>
|
||
<div ref="flightMap" style="height:80%;width:100%"></div>
|
||
<!-- <Map></Map> -->
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- middle6 -->
|
||
<div class="charts-row" style="">
|
||
<div style="flex:0 1 100%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ middle6Title }}</h3>
|
||
<div ref="middle6Container" style="width:100%; height: 90%;margin: 1px"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧第三块 -->
|
||
<div class="box">
|
||
<!-- 标题 -->
|
||
<div class="box-header" style="">
|
||
<span style=""></span>
|
||
论文
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="box-body">
|
||
<!-- 第一行 -->
|
||
<div class="charts-row" style="">
|
||
<!-- right1 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right1Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right1Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in right1Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- right2 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right2Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right2Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in right2Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- right3 -->
|
||
<div style="flex:0 1 33.33%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right3Title }}</h3>
|
||
<div
|
||
style="display: flex;justify-content: center;align-items: center;margin-top: 50px;font-size: 10px;">
|
||
<dv-decoration-9 style="width:140px;height:140px;margin-right:30px;" dur=5 v-for="item in right3Data">
|
||
<h1 style="color: rgba(255,215,0);">{{ item[1] }}</h1>
|
||
</dv-decoration-9>
|
||
</div>
|
||
<div style="display: flex;justify-content: center;text-align: center;margin-top: 20px;">
|
||
<span style="width:140px;height:30px;margin-right:30px;" v-for="item in right3Data">{{ item[0]
|
||
}}</span>
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行 -->
|
||
<div class="charts-row" style="">
|
||
<!-- right4 -->
|
||
<div style="flex:0 1 100%">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right4Title }}</h3>
|
||
<div ref="right4Container" style="width:100%; height: 90%;margin: 1px"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三行 -->
|
||
<div class="charts-row" style="justify-content: center;">
|
||
<!-- right5 -->
|
||
<div style="flex:1;">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right5Title }}</h3>
|
||
<div ref="right5Container" style="height:90%;width:100%"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- right6 -->
|
||
<div style="flex:1;">
|
||
<dv-border-box-13 style="width:100%;height:300px;padding-top: 10px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right6Title }}</h3>
|
||
<div ref="right6Container" style="height:90%;width:100%"></div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
<!-- right7 -->
|
||
<div style="flex:1;overflow: hidden;">
|
||
<dv-border-box-13 style="width:100%;height:300px;">
|
||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">{{ right7Title }}</h3>
|
||
<div style="display: flex;justify-content: center;align-items: center;">
|
||
<dv-scroll-board :config="right7Config" style="width:95%;height:220px;" />
|
||
</div>
|
||
</dv-border-box-13>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// @ is an alias to /src
|
||
import Map from './components/Map.vue'
|
||
import RadarChart from './components/RadarChart.vue'
|
||
import CapsuleChart from './components/CapsuleChart.vue';
|
||
import LineChart from './components/LineChart.vue'
|
||
import http from "@/utils/request";
|
||
import * as echarts from "echarts";
|
||
import { color, symbol } from 'd3';
|
||
import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
|
||
import dimensionComponent from "./components/dimensionComponent";
|
||
import marketRiskComponent from "./components/riskIndexComponent";
|
||
import marketRiskComponent1 from "./components/riskIndexComponent1";
|
||
// data
|
||
import hongguanfenxi from "./data/hongguanfenxi.json"
|
||
import lunbo from "./data/lunbo.json"
|
||
import hangyeyujing from "./data/hangyeyujing.json"
|
||
import 'animate.css';
|
||
|
||
export default {
|
||
name: 'App',
|
||
components: {
|
||
Map,
|
||
RadarChart,
|
||
CapsuleChart,
|
||
LineChart,
|
||
systemRiskComponent,
|
||
dimensionComponent,
|
||
marketRiskComponent,
|
||
marketRiskComponent1
|
||
},
|
||
data() {
|
||
return {
|
||
left1Data: [],
|
||
left1Title: [],
|
||
left2Data: [],
|
||
left2Title: [],
|
||
left3Data: [],
|
||
left3Title: [],
|
||
left4Data: [],
|
||
left4Title: [],
|
||
left5Data: [],
|
||
left5Title: '',
|
||
left5Config: {
|
||
},
|
||
left6Title: '',
|
||
left7Title: '',
|
||
middle1Data: [],
|
||
middle1Title: '',
|
||
middle3Data: [],
|
||
middle3Title: '',
|
||
middle4Title: '',
|
||
middle5Title: '',
|
||
middle6Title: '',
|
||
right1Data: [],
|
||
right1Title: [],
|
||
right2Data: [],
|
||
right2Title: [],
|
||
right3Data: [],
|
||
right3Title: [],
|
||
right4Title: '',
|
||
right5Title: '',
|
||
right6Title: '',
|
||
right7Title: '',
|
||
right7Config: {
|
||
},
|
||
scale: 0,
|
||
width: 5760,
|
||
height: 1080,
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
mounted() {
|
||
// 大屏自适应部分
|
||
// this.setScale();
|
||
// window.removeEventListener("resize", this.debounce(this.setScale))
|
||
// window.addEventListener("resize", this.debounce(this.setScale));
|
||
this.getLeft1Data()
|
||
this.getLeft2Data()
|
||
this.getLeft3Data()
|
||
this.getLeft4Data()
|
||
this.getLeft5Data()
|
||
this.getLeft6Data()
|
||
this.getLeft7Data()
|
||
this.getMiddle1Data()
|
||
this.getMiddle3Data()
|
||
this.getMiddle4Data()
|
||
// this.getMiddle5Data()
|
||
this.getMiddle6Data()
|
||
// this.getRight1Data()
|
||
// this.getRight2Data()
|
||
// this.getRight3Data()
|
||
// this.getRight4Data()
|
||
// this.getRight5Data()
|
||
// this.getRight6Data()
|
||
// this.getRight7Data()
|
||
|
||
},
|
||
methods: {
|
||
// 左侧第一行3块饼图数据
|
||
getLeft1Data() {
|
||
// process.env.VUE_APP_BASE_API
|
||
http.get('/jsonApi/v1/left_1.json')
|
||
.then((res) => {
|
||
// console.log('res',res);
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.left1Data = Object.entries(res.data.data)
|
||
this.left1Title = res.data.title
|
||
})
|
||
},
|
||
getLeft2Data() {
|
||
http.get('/jsonApi/v1/left_2.json')
|
||
.then((res) => {
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.left2Data = Object.entries(res.data.data)
|
||
this.left2Title = res.data.title
|
||
})
|
||
},
|
||
getLeft3Data() {
|
||
http.get('/jsonApi/v1/left_3.json')
|
||
.then((res) => {
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.left3Data = Object.entries(res.data.data)
|
||
this.left3Title = res.data.title
|
||
})
|
||
},
|
||
getLeft4Data() {
|
||
http.get('/jsonApi/v1/left_4.json')
|
||
.then((res) => {
|
||
// console.log(res.data);
|
||
this.left4Title = res.data.title
|
||
// 处理数据 得到日期数组，纵向/总数/横向数组
|
||
const keyArr = Object.keys(res.data.data[0])
|
||
const date = res.data.data.map(item => item[keyArr[0]])
|
||
const item1 = res.data.data.map(item => item[keyArr[1]])
|
||
const item2 = res.data.data.map(item => item[keyArr[2]])
|
||
const item3 = res.data.data.map(item => item[keyArr[3]])
|
||
// console.log(keyArr,date,item1,item2,item3);
|
||
const seriesData = []
|
||
seriesData.push({ data: item1, name: keyArr[1], type: 'line' })
|
||
seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
|
||
seriesData.push({ data: item3, name: keyArr[3], type: 'line' })
|
||
|
||
let echart = echarts.init(this.$refs.left4Container)
|
||
const option = {
|
||
// title:{
|
||
// text:this.left4Title,
|
||
// textStyle:{
|
||
// color:'#fff'
|
||
// },
|
||
// left:'center'
|
||
// },
|
||
color: ['#ea5455', '#f07b3f', '#ffd460'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
top: 30,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: date,
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
grid: {
|
||
containLabel: true
|
||
},
|
||
series: seriesData
|
||
};
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getLeft5Data() {
|
||
http.get('/jsonApi/v1/left_5.json')
|
||
.then((res) => {
|
||
// console.log(res.data);
|
||
this.left5Title = res.data.title
|
||
this.left5Data = res.data.data.map(item => { return { 名称: item.项目名称.substring(0, 30), 统计: item.经费统计.substring(0, 30), } })
|
||
const left5Config = {
|
||
header: ['项目名称', '经费统计'],
|
||
data: this.left5Data,
|
||
evenRowBGC: '#0A2732',
|
||
oddRowBGC: '0A2732',
|
||
headerBGC: 'rgba(61,89,171,0.5)',
|
||
waitTime: 2000
|
||
}
|
||
this.left5Config = left5Config
|
||
})
|
||
},
|
||
getLeft6Data() {
|
||
http.get('/jsonApi/v1/left_6.json')
|
||
.then((res) => {
|
||
this.left6Title = res.data.title
|
||
// 数据格式转换
|
||
const data = res.data.data.map(item => { return { 'name': item.项目类型名称, 'value': item.数量 } })
|
||
console.log('data',data);
|
||
|
||
// 按值大小排序
|
||
const sortData = data.slice().sort((a, b) => b.value - a.value)
|
||
// 只取前6项作为legend显示
|
||
const sliceData = sortData.slice(0,6)
|
||
let option = {
|
||
// title: {
|
||
// text: '科研项目类型占比',
|
||
// left: 'center',
|
||
// textStyle:{
|
||
// color:'#fff'
|
||
// }
|
||
// },
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 20,
|
||
bottom: 20,
|
||
formatter: function (name) {
|
||
return name.length > 8 ? name.substring(0, 8) + '...' : name;
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
pageTextStyle: {
|
||
color: '#fff'
|
||
},
|
||
data:sliceData
|
||
},
|
||
series: [
|
||
{
|
||
name: '姓名',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['40%', '50%'],
|
||
// minAngle:30,
|
||
minShowLabelAngle: 15,
|
||
data: data,
|
||
label: {
|
||
formatter: function (params) {
|
||
// console.log(params);
|
||
return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name;
|
||
}
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let echart = echarts.init(this.$refs.left6Container)
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getLeft7Data() {
|
||
http.get('/jsonApi/v1/left_7.json')
|
||
.then((res) => {
|
||
// console.log(res.data.data);
|
||
this.left7Title = res.data.title
|
||
const rawData = res.data.data
|
||
const keyArr = Object.keys(rawData[0])
|
||
const yearArr = rawData.map(item => item.year)
|
||
const item1 = rawData.map(item => item[keyArr[1]])
|
||
const item2 = rawData.map(item => item[keyArr[2]])
|
||
const item3 = rawData.map(item => item[keyArr[3]])
|
||
const item4 = rawData.map(item => item[keyArr[4]])
|
||
const items = [item1, item2, item3, item4]
|
||
const seriesData = []
|
||
for (let index = 0; index < keyArr.length - 1; index++) {
|
||
seriesData.push({
|
||
name: keyArr[index + 1],
|
||
type: 'bar',
|
||
data: items[index]
|
||
})
|
||
}
|
||
let option = {
|
||
color: ["#92140C","#ff773d","#f19143","#ffb238"],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
// bottom: '3%',
|
||
// containLabel: true
|
||
// },
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: yearArr,
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: seriesData
|
||
};
|
||
let echart = echarts.init(this.$refs.left7Container)
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getMiddle1Data() {
|
||
http.get('/jsonApi/v1/middle_1.json')
|
||
.then((res) => {
|
||
// console.log('res', res);
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.middle1Data = Object.entries(res.data.data)
|
||
this.middle1Title = res.data.title
|
||
})
|
||
},
|
||
getMiddle3Data() {
|
||
http.get('/jsonApi/v1/middle_3.json')
|
||
.then((res) => {
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.middle3Data = Object.entries(res.data.data)
|
||
this.middle3Title = res.data.title
|
||
})
|
||
},
|
||
getMiddle4Data() {
|
||
http.get('/jsonApi/v1/middle_4.json')
|
||
.then((res) => {
|
||
// console.log('res', res);
|
||
this.middle4Title = res.data.title
|
||
const years = res.data.data.map(item => item.year)
|
||
let keyArr = []
|
||
const seriesData = res.data.data.map(item => {
|
||
// 得到每一serie的values数组
|
||
const valueArr = Object.values(item)
|
||
const name = valueArr.shift()
|
||
keyArr = Object.keys(item)
|
||
return {
|
||
name: name,
|
||
value: valueArr,
|
||
}
|
||
})
|
||
const echarts3 = echarts.init(this.$refs.middle4)
|
||
const option = {
|
||
tooltip: {},
|
||
legend: {
|
||
data: years,
|
||
x: "center",
|
||
y: 'bottom',
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
color: ['red', 'yellow', 'blue'],
|
||
radar: {
|
||
name: {
|
||
textStyle: {
|
||
//设置颜色
|
||
color: '#fff'
|
||
}
|
||
},
|
||
indicator: [// 依次是：专利,"纵向项目","横向项目","获奖","软著","人文社科"
|
||
{ name: keyArr[1], max: 300, color: '#fff' },
|
||
{ name: keyArr[2], max: 300, color: '#fff' },
|
||
{ name: keyArr[3], max: 700, color: '#fff' },
|
||
{ name: keyArr[4], max: 100, color: '#fff' },
|
||
{ name: keyArr[5], max: 200, color: '#fff' },
|
||
{ name: keyArr[6], max: 100, color: '#fff' }
|
||
],
|
||
center: ['50%', '50%'],
|
||
radius: "58%"
|
||
},
|
||
series: [{
|
||
name: '',
|
||
type: 'radar',
|
||
itemStyle: {
|
||
normal: {
|
||
splitLine: {
|
||
lineStyle: {
|
||
}
|
||
},
|
||
label: {
|
||
show: false,
|
||
textStyle: {
|
||
},
|
||
formatter: function (params) {
|
||
return params.value;
|
||
}
|
||
},
|
||
}
|
||
},
|
||
data: seriesData
|
||
}]
|
||
};
|
||
echarts3.setOption(option)
|
||
})
|
||
},
|
||
getMiddle5Data() {
|
||
const that = this
|
||
http.get('/jsonApi/v1/middle_5.json')
|
||
.then((res) => {
|
||
// console.log(res);
|
||
this.middle5Title = res.data.title
|
||
const rawData = res.data.data
|
||
const chinaDatass = rawData.map(item => {
|
||
return [{
|
||
name:item.受让方所属省份,
|
||
value:item.到账金额
|
||
}]
|
||
})
|
||
// console.log('chinaDatass',chinaDatass);
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(this.$refs.flightMap);
|
||
// 经纬度
|
||
var chinaGeoCoordMap = {
|
||
'黑龙江省': [127.9688, 45.368],
|
||
'内蒙古自治区': [110.3467, 41.4899],
|
||
"吉林省": [125.8154, 44.2584],
|
||
'北京市': [116.4551, 40.2539],
|
||
"辽宁省": [123.1238, 42.1216],
|
||
"河北省": [114.4995, 38.1006],
|
||
"天津市": [117.4219, 39.4189],
|
||
"山西省": [112.3352, 37.9413],
|
||
"陕西省": [109.1162, 34.2004],
|
||
"甘肃省": [103.5901, 36.3043],
|
||
"宁夏回族自治区": [106.3586, 38.1775],
|
||
"青海省": [101.4038, 36.8207],
|
||
"新疆维吾尔自治区": [87.9236, 43.5883],
|
||
"西藏自治区": [91.11, 29.97],
|
||
"四川省": [103.9526, 30.7617],
|
||
"重庆市": [108.384366, 30.439702],
|
||
"山东省": [117.1582, 36.8701],
|
||
"河南省": [113.4668, 34.6234],
|
||
"江苏省": [118.8062, 31.9208],
|
||
"安徽省": [117.29, 32.0581],
|
||
"湖北省": [114.3896, 30.6628],
|
||
"浙江省": [119.5313, 29.8773],
|
||
"福建省": [119.4543, 25.9222],
|
||
"江西省": [116.0046, 28.6633],
|
||
"湖南省": [113.0823, 28.2568],
|
||
"贵州省": [106.6992, 26.7682],
|
||
"云南省": [102.9199, 25.4663],
|
||
"广东省": [113.12244, 23.009505],
|
||
"广西省": [108.479, 23.1152],
|
||
"海南省": [110.3893, 19.8516],
|
||
'上海市': [121.4648, 31.2891]
|
||
};
|
||
// 实际动态数据
|
||
// var chinaDatas = [
|
||
// [{
|
||
// name: '黑龙江省',
|
||
// value: 2
|
||
// }], [{
|
||
// name: '北京市',
|
||
// value: 1
|
||
// }], [{
|
||
// name: '内蒙古自治区',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '吉林省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '辽宁省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '河北省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '天津市',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '山西',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '陕西',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '甘肃省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '宁夏回族自治区',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '青海',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '新疆',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '西藏',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '四川省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '重庆市',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '山东省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '河南省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '江苏省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '安徽省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '湖北省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '浙江省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '福建省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '江西省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '湖南省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '贵州',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '广西',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '海南省',
|
||
// value: 0
|
||
// }], [{
|
||
// name: '上海市',
|
||
// value: 1
|
||
// }]
|
||
// ];
|
||
//[ [ {name:黑龙江省,value:0} ],... ] 到时候value是经费
|
||
//变成
|
||
//[ [ {coord:黑龙江省,value:[经纬度]},{coord:[北京经纬度]} ],... ]
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var dataItem = data[i];
|
||
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
|
||
var toCoord = [116.4551, 40.2539];
|
||
if (fromCoord && toCoord) {
|
||
res.push([{
|
||
coord: toCoord,
|
||
},{
|
||
coord: fromCoord,
|
||
value: dataItem[0].value
|
||
}]);
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
var series = [];
|
||
// series配置
|
||
[['北京市', chinaDatass]].forEach(function (item, i) {
|
||
// console.log('item',item)
|
||
series.push({
|
||
type: 'lines',
|
||
zlevel: 2,
|
||
effect: {
|
||
show: true,
|
||
period: 4, //箭头指向速度，值越小速度越快
|
||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||
symbol: 'arrow', //箭头图标
|
||
symbolSize: 5, //图标大小
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1, //尾迹线条宽度
|
||
opacity: 1, //尾迹线条透明度
|
||
color: '#DDD38C',// 飞线颜色
|
||
curveness: .3 //尾迹线条曲直度
|
||
}
|
||
},
|
||
tooltip:{
|
||
formatter: ''
|
||
},
|
||
data: convertData(item[1])
|
||
},
|
||
{
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
zlevel: 2,
|
||
rippleEffect: { //涟漪特效
|
||
period: 5, //动画时间，值越小速度越快
|
||
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
||
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'right', //显示位置
|
||
offset: [5, 0], //偏移设置
|
||
formatter: function (params) {//圆环显示文字
|
||
const baiwei = that.getThousandAndHundredsDigit(params.data.value[2])
|
||
return baiwei>0? params.data.name : '';
|
||
},
|
||
fontSize: 13
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
symbol: 'circle',
|
||
symbolSize: function (val) {
|
||
// 得到百位数
|
||
const baiwei = that.getThousandAndHundredsDigit(val[2])
|
||
return 3 + baiwei * 1; //圆环大小
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: '#59D3DE'//圆环颜色
|
||
}
|
||
},
|
||
data: item[1].map(function (dataItem) {
|
||
return {
|
||
name: dataItem[0].name,
|
||
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
|
||
};
|
||
}),
|
||
},
|
||
//被攻击点
|
||
// {
|
||
// type: 'scatter',
|
||
// coordinateSystem: 'geo',
|
||
// zlevel: 2,
|
||
// rippleEffect: {
|
||
// period: 4,
|
||
// brushType: 'stroke',
|
||
// scale: 4
|
||
// },
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: 'right',
|
||
// //offset:[5, 0],
|
||
// color: 'red',
|
||
// formatter: '{b}',
|
||
// textStyle: {
|
||
// color: "red"
|
||
// }
|
||
// },
|
||
// emphasis: {
|
||
// show: true,
|
||
// color: "#f60"
|
||
// }
|
||
// },
|
||
// symbol: 'pin',
|
||
// symbolSize: 50,
|
||
// data: [{
|
||
// name: item[0],
|
||
// value: chinaGeoCoordMap[item[0]].concat([10]),
|
||
// }],
|
||
// }
|
||
);
|
||
});
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
// backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
||
borderColor: '#FFFFCC',
|
||
showDelay: 0,
|
||
hideDelay: 0,
|
||
enterable: true,
|
||
transitionDuration: 0,
|
||
extraCssText: 'z-index:100',
|
||
formatter: function (params, ticket, callback) {
|
||
//根据业务自己拓展要显示的内容
|
||
var res = "";
|
||
var name = params.name;
|
||
var value = params.value[params.seriesIndex + 1];
|
||
res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
|
||
return res;
|
||
}
|
||
},
|
||
// backgroundColor: "#013954",
|
||
// visualMap: { //图例值控制
|
||
// min: 0,
|
||
// max: 1,
|
||
// calculable: true,
|
||
// show: true,
|
||
// color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||
// textStyle: {
|
||
// color: '#fff'
|
||
// }
|
||
// },
|
||
geo: {
|
||
map: 'china',
|
||
zoom: 1.2,
|
||
label: {
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
roam: true, //是否允许缩放
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(51, 69, 89, .5)', //地图背景色
|
||
borderColor: '#516a89', //省市边界线00fcff 516a89
|
||
borderWidth: 1
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(37, 43, 61, .5)' //悬浮背景
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart.setOption(option)
|
||
})
|
||
|
||
},
|
||
getMiddle6Data() {
|
||
http.get('/jsonApi/v1/middle_6.json')
|
||
.then((res) => {
|
||
// console.log(res.data);
|
||
this.middle6Title = res.data.title
|
||
// 处理数据 得到日期数组，纵向/总数/横向数组
|
||
const keyArr = Object.keys(res.data.data[0])
|
||
const date = res.data.data.map(item => item[keyArr[0]])
|
||
const item1 = res.data.data.map(item => item[keyArr[1]])
|
||
const item2 = res.data.data.map(item => item[keyArr[2]])
|
||
const item3 = res.data.data.map(item => item[keyArr[3]])
|
||
// console.log(keyArr,date,item1,item2,item3);
|
||
const seriesData = []
|
||
seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true })
|
||
seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
|
||
seriesData.push({ data: item3, name: keyArr[3], type: 'line' })
|
||
|
||
let echart = echarts.init(this.$refs.middle6Container)
|
||
const option = {
|
||
// title:{
|
||
// text:this.middle6Title,
|
||
// textStyle:{
|
||
// color:'#fff'
|
||
// },
|
||
// left:'center'
|
||
// },
|
||
color: ['#ea5455', '#f07b3f', '#ffd460'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
top: 30,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: date,
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
// boundaryGap:false
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
containLabel: true
|
||
},
|
||
series: seriesData
|
||
};
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getRight1Data() {
|
||
// process.env.VUE_APP_BASE_API
|
||
http.get('/jsonApi/v1/right_1.json')
|
||
.then((res) => {
|
||
// console.log('res',res);
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.right1Data = Object.entries(res.data.data)
|
||
this.right1Title = res.data.title
|
||
})
|
||
},
|
||
getRight2Data() {
|
||
// process.env.VUE_APP_BASE_API
|
||
http.get('/jsonApi/v1/right_2.json')
|
||
.then((res) => {
|
||
// console.log('res',res);
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.right2Data = Object.entries(res.data.data)
|
||
this.right2Title = res.data.title
|
||
})
|
||
},
|
||
getRight3Data() {
|
||
// process.env.VUE_APP_BASE_API
|
||
http.get('/jsonApi/v1/right_3.json')
|
||
.then((res) => {
|
||
// console.log('res',res);
|
||
// 标题和数据
|
||
// 格式形如 [[key1,value1],[key2,value2]...]
|
||
this.right3Data = Object.entries(res.data.data)
|
||
this.right3Title = res.data.title
|
||
})
|
||
},
|
||
getRight4Data() {
|
||
http.get('/jsonApi/v1/right_4.json')
|
||
.then((res) => {
|
||
this.right4Title = res.data.title
|
||
// 处理数据 得到日期数组，纵向/总数/横向数组
|
||
const keyArr = Object.keys(res.data.data[0])
|
||
const date = res.data.data.map(item => item[keyArr[0]])
|
||
const item1 = res.data.data.map(item => item[keyArr[1]])
|
||
const item2 = res.data.data.map(item => item[keyArr[2]])
|
||
const item3 = res.data.data.map(item => item[keyArr[3]])
|
||
// console.log(keyArr,date,item1,item2,item3);
|
||
const seriesData = []
|
||
seriesData.push({ data: item1, name: keyArr[1], type: 'line',connectNulls:true,smooth:true })
|
||
seriesData.push({ data: item2, name: keyArr[2], type: 'line' })
|
||
seriesData.push({ data: item3, name: keyArr[3], type: 'line' })
|
||
|
||
let echart = echarts.init(this.$refs.right4Container)
|
||
const option = {
|
||
// title:{
|
||
// text:this.right4Title,
|
||
// textStyle:{
|
||
// color:'#fff'
|
||
// },
|
||
// left:'center'
|
||
// },
|
||
color: ['#ea5455', '#f07b3f', '#ffd460'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
top: 30,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: date,
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
// boundaryGap:false
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '8%',
|
||
containLabel: true
|
||
},
|
||
series: seriesData
|
||
};
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getRight5Data() {
|
||
http.get('/jsonApi/v1/right_5.json')
|
||
.then((res) => {
|
||
console.log('getRight5Data 数据有问题',res.data);
|
||
this.right5Title = res.data.title
|
||
const rawData = res.data.data
|
||
// console.log(rawData);
|
||
return
|
||
const keyArr = Object.keys(rawData[0])
|
||
const yearArr = rawData.map(item => item.year)
|
||
const item1 = rawData.map(item => item[keyArr[1]])
|
||
const item2 = rawData.map(item => item[keyArr[2]])
|
||
const item3 = rawData.map(item => item[keyArr[3]])
|
||
const item4 = rawData.map(item => item[keyArr[4]])
|
||
const items = [item1, item2, item3, item4]
|
||
const seriesData = []
|
||
for (let index = 0; index < keyArr.length - 1; index++) {
|
||
seriesData.push({
|
||
name: keyArr[index + 1],
|
||
type: 'bar',
|
||
data: items[index]
|
||
})
|
||
}
|
||
let option = {
|
||
color: ["#92140C","#ff773d","#f19143","#ffb238"],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
// grid: {
|
||
// left: '3%',
|
||
// right: '4%',
|
||
// bottom: '3%',
|
||
// containLabel: true
|
||
// },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: yearArr,
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: seriesData
|
||
};
|
||
let echart = echarts.init(this.$refs.right5Container)
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getRight6Data() {
|
||
http.get('/jsonApi/v1/right_6.json')
|
||
.then((res) => {
|
||
// console.log('getRight6Data',res.data);
|
||
const entries = Object.entries(res.data.data)
|
||
const data1 = entries.map(item => { return { 'name': item[0], 'value': item[1] } })
|
||
console.log('data1',data1);
|
||
this.right6Title = res.data.title
|
||
let option = {
|
||
// title: {
|
||
// text: '科研项目类型占比',
|
||
// left: 'center',
|
||
// textStyle:{
|
||
// color:'#fff'
|
||
// }
|
||
// },
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 30,
|
||
top: 20,
|
||
bottom: 20,
|
||
formatter: function (name) {
|
||
return name.length > 8 ? name.substring(0, 8) + '...' : name;
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
pageTextStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
// name: '姓名',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '50%'],
|
||
// minAngle:30,
|
||
minShowLabelAngle: 15,
|
||
data: data1,
|
||
label: {
|
||
formatter: function (params) {
|
||
// console.log(params);
|
||
return params.data.name.length > 10 ? params.data.name.substring(0, 10) + '...' : params.data.name;
|
||
}
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let echart = echarts.init(this.$refs.right6Container)
|
||
echart.setOption(option)
|
||
})
|
||
},
|
||
getRight7Data() {
|
||
http.get('/jsonApi/v1/right_7.json')
|
||
.then((res) => {
|
||
console.log('getRight7Data',res.data);
|
||
this.right7Title = res.data.title
|
||
this.right7Data = res.data.data.map(item => { return { 名称: item.刊物名称.substring(0, 30), 统计: item.发表数量, } })
|
||
const right7Config = {
|
||
header: ['刊物名称', '发表数量'],
|
||
data: this.right7Data,
|
||
evenRowBGC: '#0A2732',
|
||
oddRowBGC: '0A2732',
|
||
headerBGC: 'rgba(61,89,171,0.5)',
|
||
waitTime: 2000
|
||
}
|
||
this.right7Config = right7Config
|
||
})
|
||
},
|
||
getScale() {
|
||
// 固定好16：9的宽高比，计算出最合适的缩放比
|
||
const { width, height } = this;
|
||
const wh = window.innerHeight / height;
|
||
const ww = window.innerWidth / width;
|
||
console.log('缩放比', ww < wh ? ww : wh);
|
||
return ww < wh ? ww : wh;
|
||
},
|
||
setScale() {
|
||
// 获取到缩放比例，设置它
|
||
this.scale = this.getScale();
|
||
if (this.$refs.ScaleBox) {
|
||
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
||
}
|
||
},
|
||
debounce(fn, delay) {
|
||
const delays = delay || 500;
|
||
let timer;
|
||
return function () {
|
||
const th = this;
|
||
const args = arguments;
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
}
|
||
timer = setTimeout(function () {
|
||
timer = null;
|
||
fn.apply(th, args);
|
||
}, delays);
|
||
};
|
||
},
|
||
getThousandAndHundredsDigit(number) {
|
||
|
||
|
||
// 如果数字小于100，返回0
|
||
if (number < 100) {
|
||
return 0;
|
||
}
|
||
|
||
// 获取千位和百位
|
||
const thousandAndHundreds = Math.floor((number % 10000) / 100);
|
||
|
||
return thousandAndHundreds;
|
||
},
|
||
oldEchartsInit() {
|
||
// 宏观分析 6个折线图
|
||
// hongguanfenxi json
|
||
this.date = hongguanfenxi.date
|
||
this.rate = hongguanfenxi.rate
|
||
this.macro = hongguanfenxi.macro
|
||
this.montary = hongguanfenxi.montary
|
||
this.income = hongguanfenxi.income
|
||
this.investment = hongguanfenxi.investment
|
||
this.loan = hongguanfenxi.loan
|
||
this.lever = hongguanfenxi.lever
|
||
this.other = hongguanfenxi.other
|
||
this.whole.push(this.rate)
|
||
this.whole.push(this.montary)
|
||
this.whole.push(this.lever)
|
||
// this.whole.push(this.loan)
|
||
this.whole.push(this.macro)
|
||
this.whole.push(this.income)
|
||
this.whole.push(this.investment)
|
||
this.whole.push(this.other)
|
||
|
||
for (let i = 0; i < 6; i++) {
|
||
// let chartContainer = 'chartContainer' + i
|
||
let echart = echarts.init(this.$refs.chartContainer[i])
|
||
const option1 = {
|
||
title: {
|
||
text: this.title[i],
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
top: 30,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.date,
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
}
|
||
},
|
||
},
|
||
grid: {
|
||
containLabel: true
|
||
},
|
||
series: this.whole[i]
|
||
};
|
||
echart.setOption(option1)
|
||
}
|
||
|
||
// 轮播图
|
||
// lunbo json
|
||
const nearestWeekday = this.getNearestWeekday()
|
||
// console.log('nearestWeekday',nearestWeekday);
|
||
|
||
const formatData = lunbo.data.map(item => {
|
||
item.监测时间 = nearestWeekday + item.监测时间.substring(10)
|
||
return [item.监测时间, item.名称, item.异常关联类型]
|
||
})
|
||
const config22 = {
|
||
header: ['监测时间', '名称', '异常关联类型'],
|
||
data: formatData,
|
||
// headerBGC:'black',
|
||
evenRowBGC: '#0A2732',
|
||
oddRowBGC: '0A2732',
|
||
}
|
||
// console.log('formatData',formatData);
|
||
this.config22 = config22
|
||
|
||
// 健康指数 雷达图
|
||
let radarData = [
|
||
{
|
||
value: [82.44588614888224, 25, 54.00000000000001, 58.56999999999999, 20, 65, 5],
|
||
name: '纳尔实业'
|
||
},
|
||
{
|
||
value: [50.033, 45, 58.8, 62.73, 10, 65, 50],
|
||
name: '平安保险'
|
||
},
|
||
{
|
||
value: [43.064, 50, 53.6, 64.23, 10, 75, 50],
|
||
name: '招商银行'
|
||
}]
|
||
// console.log('radarData', radarData);
|
||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||
const option = {
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['纳尔实业', '平安保险', '招商银行'],
|
||
x: "center",
|
||
y: 'bottom',
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
color: ['red', 'yellow', 'blue'],
|
||
radar: {
|
||
name: {
|
||
textStyle: {
|
||
//设置颜色
|
||
color: '#fff'
|
||
}
|
||
},
|
||
indicator: [
|
||
{ name: '投资关系', max: 100, color: '#fff' },
|
||
{ name: '操盘模式', max: 100, color: '#fff' },
|
||
{ name: '财务状态', max: 100, color: '#fff' },
|
||
{ name: '运行状态', max: 100, color: '#fff' },
|
||
{ name: '规模扩张', max: 100, color: '#fff' },
|
||
{ name: '声誉风险', max: 100, color: '#fff' },
|
||
{ name: '外部环境', max: 100, color: '#fff' }
|
||
],
|
||
center: ['50%', '50%'],
|
||
radius: "58%"
|
||
},
|
||
series: [{
|
||
name: '',
|
||
type: 'radar',
|
||
itemStyle: {
|
||
normal: {
|
||
splitLine: {
|
||
lineStyle: {
|
||
}
|
||
},
|
||
label: {
|
||
show: false,
|
||
textStyle: {
|
||
},
|
||
formatter: function (params) {
|
||
return params.value;
|
||
}
|
||
},
|
||
}
|
||
},
|
||
data: radarData
|
||
}]
|
||
};
|
||
echarts3.setOption(option)
|
||
|
||
// 行业预警排行
|
||
const echarts2 = echarts.init(this.$refs.echarts_2)
|
||
// hangyeyujing json
|
||
let xData = [], yData = []
|
||
let tmp = hangyeyujing
|
||
for (let key in tmp) {
|
||
if (key.length < 16) {
|
||
xData.push(tmp[key])
|
||
yData.push(key)
|
||
}
|
||
}
|
||
const option_2 = {
|
||
grid: {
|
||
left: '34%',//离左边远一点
|
||
right: '4%',
|
||
bottom: '15%',
|
||
top: '5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: yData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
// color:'#6d7d87',
|
||
type: 'bar',
|
||
data: xData
|
||
},
|
||
]
|
||
}
|
||
echarts2.setOption(option_2)
|
||
this.$refs.dimension.getData()
|
||
// 第三屏中间
|
||
this.$refs.marketRisk.getData()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body,
|
||
input,
|
||
button,
|
||
a,
|
||
textarea,
|
||
select {
|
||
margin: 0;
|
||
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||
|
||
}
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
ul li {
|
||
list-style: none;
|
||
}
|
||
|
||
.ScaleBox {
|
||
position: absolute;
|
||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transform-origin: 0 0;
|
||
left: 50%;
|
||
top: 50%;
|
||
transition: 0.3s;
|
||
z-index: 999;
|
||
}
|
||
|
||
.bg {
|
||
padding: 0;
|
||
background: url('./assets/pageBg.png') center center;
|
||
}
|
||
|
||
.container {
|
||
color: aliceblue;
|
||
|
||
// width: 5760px;
|
||
// height: 1080px;
|
||
// background-color: #18478F;
|
||
// animation: rotateIn; /* referring directly to the animation's @keyframe declaration */
|
||
// animation-duration: 3s; /* don't forget to set a duration! */
|
||
>.header {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
width: 100%;
|
||
height: 100px; //
|
||
|
||
|
||
.header-left,
|
||
.header-right {
|
||
flex: 0 1 20%;
|
||
|
||
.el-button {
|
||
border: none;
|
||
transform: skewX(45deg);
|
||
width: 180px;
|
||
height: 50px;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.el-button--primary {
|
||
background-color: rgba(0, 102, 172, 0.4);
|
||
border-color: #0066AC;
|
||
}
|
||
|
||
.el-button--primary:focus {
|
||
background-color: #BDA158;
|
||
}
|
||
}
|
||
|
||
.header-title {
|
||
flex: 0 1 32%
|
||
}
|
||
}
|
||
|
||
.main {
|
||
width: 100%;
|
||
height: 980px; //
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
.box {
|
||
flex: 0 1 32%;
|
||
height: 940px; //
|
||
// background-color: #0C2B61;
|
||
|
||
.box-header {
|
||
// background-color: #18478F;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
height: 40px; //
|
||
line-height: 40px;
|
||
border: 1px solid rgb(40, 110, 216);
|
||
|
||
span {
|
||
float: left;
|
||
width: 0;
|
||
height: 0;
|
||
// border-top: 30px solid #1596ca;
|
||
// border-right: 30px solid transparent;
|
||
}
|
||
}
|
||
|
||
.box-body {
|
||
height: 850px; //
|
||
|
||
.charts-row {
|
||
display: flex;
|
||
|
||
.chart-container {
|
||
width: 50%;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.chart-title {
|
||
text-align: left;
|
||
height: 10%; //
|
||
padding-top: 8px;
|
||
|
||
.icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
|
||
.chart {
|
||
height: 90%; //
|
||
}
|
||
}
|
||
|
||
.el-tabs__content {
|
||
height: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
.el-tabs--border-card {
|
||
background-color: transparent !important;
|
||
border: transparent !important;
|
||
}
|
||
|
||
.el-tabs__header {
|
||
background-color: transparent !important;
|
||
border-bottom: transparent !important;
|
||
}
|
||
|
||
.el-tabs__item.is-active {
|
||
background-color: transparent !important;
|
||
border-right-color: transparent !important;
|
||
border-left-color: transparent !important;
|
||
}
|
||
}
|
||
|
||
.box-footer {
|
||
height: 30px;
|
||
position: relative;
|
||
|
||
span {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: 25px solid #1596ca;
|
||
border-left: 25px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
::v-deep .dv-scroll-board .ceil {
|
||
width: 50%;
|
||
}
|
||
|
||
::v-deep .dv-scroll-board .header-item {
|
||
width: 50%;
|
||
}
|
||
</style> |