第二层图标
This commit is contained in:
MTrunning
Generated
+39
@@ -1119,6 +1119,14 @@
|
|||||||
"integrity": "sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=",
|
"integrity": "sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/echarts": {
|
||||||
|
"version": "4.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.4.3.tgz",
|
||||||
|
"integrity": "sha512-HmDmg9hDJQC5KOpNOeVgcaBM+emDiduNyCCHVInDrVVfLDVPuK4fSSISy39kn1HqPa1hYDQ96FIGEhjRNGHhPA==",
|
||||||
|
"requires": {
|
||||||
|
"@types/zrender": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/events": {
|
"@types/events": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz",
|
||||||
@@ -1160,6 +1168,11 @@
|
|||||||
"integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
|
"integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/zrender": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w=="
|
||||||
|
},
|
||||||
"@vue/babel-helper-vue-jsx-merge-props": {
|
"@vue/babel-helper-vue-jsx-merge-props": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
|
||||||
@@ -4073,6 +4086,14 @@
|
|||||||
"safer-buffer": "^2.1.0"
|
"safer-buffer": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"echarts": {
|
||||||
|
"version": "4.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.6.0.tgz",
|
||||||
|
"integrity": "sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==",
|
||||||
|
"requires": {
|
||||||
|
"zrender": "4.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"ee-first": {
|
"ee-first": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
|
||||||
@@ -7617,6 +7638,11 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"nanoid": {
|
||||||
|
"version": "2.1.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
|
||||||
|
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
|
||||||
|
},
|
||||||
"nanomatch": {
|
"nanomatch": {
|
||||||
"version": "1.2.13",
|
"version": "1.2.13",
|
||||||
"resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
|
"resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
|
||||||
@@ -11125,6 +11151,14 @@
|
|||||||
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1583528900332&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1583528900332&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
|
||||||
"integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
|
"integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
|
||||||
},
|
},
|
||||||
|
"vue-awesome": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-awesome/-/vue-awesome-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-TE9hVwyVrGnBetO/MJwZ/7qLO6Vgr/WrDtIA7vwNryoLdA2jfRcKRw29KacpU5xj3wzZhHfYJ2xJLxfirhmH5Q==",
|
||||||
|
"requires": {
|
||||||
|
"nanoid": "^2.1.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-eslint-parser": {
|
"vue-eslint-parser": {
|
||||||
"version": "7.0.0",
|
"version": "7.0.0",
|
||||||
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz?cache=0&sync_timestamp=1573306368916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.0.0.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz?cache=0&sync_timestamp=1573306368916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.0.0.tgz",
|
||||||
@@ -11869,6 +11903,11 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"zrender": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.2.0.tgz",
|
||||||
|
"integrity": "sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA=="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,8 +9,11 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jiaminghi/data-view": "^2.7.3",
|
"@jiaminghi/data-view": "^2.7.3",
|
||||||
|
"@types/echarts": "^4.4.3",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
|
"echarts": "^4.6.0",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-awesome": "^4.0.2",
|
||||||
"vue-router": "^3.1.5",
|
"vue-router": "^3.1.5",
|
||||||
"vuex": "^3.1.2"
|
"vuex": "^3.1.2"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bg-color-black {
|
.bg-color-black {
|
||||||
background-color: #0f1325;
|
background-color: rgba(19, 25, 47, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-color-blue {
|
.bg-color-blue {
|
||||||
@@ -79,6 +79,22 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.colorGrass {
|
||||||
|
color: #33CEA0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #33CEA0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorRed {
|
||||||
|
color: #ff5722;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ff5722 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.colorText {
|
.colorText {
|
||||||
color: #D3D6DD !important;
|
color: #D3D6DD !important;
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,341 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="centreLeft1Chart"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawPie();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawPie(sidebar) {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChartPieLeft = echarts.init(
|
||||||
|
document.getElementById("centreLeft1Chart")
|
||||||
|
);
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
var value = 83;
|
||||||
|
let option = {
|
||||||
|
backgroundColor: "000",
|
||||||
|
title: {
|
||||||
|
text: `${value}分`,
|
||||||
|
subtext: "综合健康评分",
|
||||||
|
left: "center",
|
||||||
|
top: "center", //top待调整
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 80,
|
||||||
|
fontFamily: "DINAlternate-Bold"
|
||||||
|
},
|
||||||
|
subtextStyle: {
|
||||||
|
color: "#ff",
|
||||||
|
fontSize: 35,
|
||||||
|
fontFamily: "PingFangSC-Regular",
|
||||||
|
top: "center"
|
||||||
|
},
|
||||||
|
itemGap: -4 //主副标题间距
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
// data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// 内圆
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0", "50%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
z: 0,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#1147A1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "#423DB3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#1147A1"
|
||||||
|
}
|
||||||
|
]),
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
position: "center"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [100]
|
||||||
|
},
|
||||||
|
// 进度圈
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
clockWise: true,
|
||||||
|
radius: ["60%", "55%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: value,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 10,
|
||||||
|
borderColor: {
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#7940FE" || "#00cefc" // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#2A69EC" || "#367bec" // 100% 处的颜色
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
// 完成的圆环的颜色
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#7940FE" || "#00cefc" // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#2A69EC" || "#367bec" // 100% 处的颜色
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "gap",
|
||||||
|
value: 100 - value,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
color: "rgba(0, 0, 0, 0)",
|
||||||
|
borderColor: "rgba(0, 0, 0, 0)",
|
||||||
|
borderWidth: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
//刻度尺
|
||||||
|
{
|
||||||
|
// name: "白色圈刻度",
|
||||||
|
type: "gauge",
|
||||||
|
radius: "67%",
|
||||||
|
startAngle: 225, //刻度起始
|
||||||
|
endAngle: -134.8, //刻度结束
|
||||||
|
z: 4,
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "rgba(1,244,255, 0.9)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 16, //刻度节点线长度
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: "rgba(1,244,255, 0.9)"
|
||||||
|
} //刻度节点线
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(255,255,255,0)",
|
||||||
|
fontSize: 12
|
||||||
|
}, //刻度节点文字颜色
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 0,
|
||||||
|
name: ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 刻度圈
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0%", "73%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "bold"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0.05,
|
||||||
|
color: "rgba(32,36,107, 0.2)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(32,36,107,0.3)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.95,
|
||||||
|
color: "rgba(32,36,107, 0.2)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 3235
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
//最外层圈
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0%", "85%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
hoverAnimation: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "bold"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0.05,
|
||||||
|
color: "rgba(21,24,65, 0.2)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: "rgba(21,24,65, 0.3)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.95,
|
||||||
|
color: "rgba(21,24,65, 0.2)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 3235
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChartPieLeft.setOption(option);
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// 响应式变化
|
||||||
|
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||||
|
//侧边栏变化
|
||||||
|
if (sidebar) {
|
||||||
|
myChartPieLeft.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.onresize = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawPie();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawPie(sidebar) {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChartPieLeft = echarts.init(
|
||||||
|
document.getElementById("centreLeft1Chart")
|
||||||
|
);
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
myChartPieLeft.setOption({
|
||||||
|
color: [
|
||||||
|
"#37a2da",
|
||||||
|
"#32c5e9",
|
||||||
|
"#9fe6b8",
|
||||||
|
"#ffdb5c",
|
||||||
|
"#ff9f7f",
|
||||||
|
"#fb7293",
|
||||||
|
"#e7bcf3",
|
||||||
|
"#8378ea"
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
icon: "circle",
|
||||||
|
bottom: 0,
|
||||||
|
x: "center",
|
||||||
|
data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "增值电信业务统计表",
|
||||||
|
type: "pie",
|
||||||
|
radius: [10, 60],
|
||||||
|
roseType: "area",
|
||||||
|
center: ["50%", "40%"],
|
||||||
|
data: [
|
||||||
|
{ value: 10, name: "rose1" },
|
||||||
|
{ value: 5, name: "rose2" },
|
||||||
|
{ value: 15, name: "rose3" },
|
||||||
|
{ value: 25, name: "rose4" },
|
||||||
|
{ value: 20, name: "rose5" },
|
||||||
|
{ value: 35, name: "rose6" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// 响应式变化
|
||||||
|
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||||
|
//侧边栏变化
|
||||||
|
if (sidebar) {
|
||||||
|
myChartPieLeft.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.onresize = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="centreLeft2Chart" style="width:330px; height: 370px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawPie();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawPie(sidebar) {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChartPieLeft = echarts.init(
|
||||||
|
document.getElementById("centreLeft2Chart")
|
||||||
|
);
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
angleAxis: {
|
||||||
|
interval: 1,
|
||||||
|
type: "category",
|
||||||
|
data: [
|
||||||
|
"there1",
|
||||||
|
"there2",
|
||||||
|
"there3",
|
||||||
|
"there4",
|
||||||
|
"there5",
|
||||||
|
"there6",
|
||||||
|
"there7",
|
||||||
|
"there8",
|
||||||
|
"there9",
|
||||||
|
"there10 "
|
||||||
|
],
|
||||||
|
z: 10,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#00c7ff",
|
||||||
|
width: 1,
|
||||||
|
type: "solid"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
show: true,
|
||||||
|
color: "#00c7ff",
|
||||||
|
margin: 8,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radiusAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
interval: 20,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#00c7ff",
|
||||||
|
width: 1,
|
||||||
|
type: "solid"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value} %",
|
||||||
|
show: false,
|
||||||
|
padding: [0, 0, 20, 0],
|
||||||
|
color: "#00c7ff",
|
||||||
|
fontSize: 16
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#00c7ff",
|
||||||
|
width: 1,
|
||||||
|
type: "solid"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
orient: "vartical",
|
||||||
|
top: "center",
|
||||||
|
bottom: "0%",
|
||||||
|
itemWidth: 16,
|
||||||
|
itemHeight: 8,
|
||||||
|
itemGap: 16,
|
||||||
|
textStyle: {
|
||||||
|
color: "#A3E2F4",
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: 0
|
||||||
|
},
|
||||||
|
data: ["A"]
|
||||||
|
},
|
||||||
|
polar: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "A",
|
||||||
|
type: "bar",
|
||||||
|
radius: ["20%", "100%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 87,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#f54d4d"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#f87544"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 75,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#ffae00"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 69,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#dcff00"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 63,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#25d053"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 54,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#01fff5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 47,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#007cff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 40,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#4245ff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 35,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#c32eff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 33,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#ff62e8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
coordinateSystem: "polar"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChartPieLeft.setOption(option);
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// 响应式变化
|
||||||
|
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||||
|
//侧边栏变化
|
||||||
|
if (sidebar) {
|
||||||
|
myChartPieLeft.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.onresize = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawPie();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
drawPie(sidebar) {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChartPieLeft = echarts.init(
|
||||||
|
document.getElementById("centreRight2Chart1")
|
||||||
|
);
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Schema:
|
||||||
|
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||||||
|
var dataBJ = [
|
||||||
|
[94, 69, 114, 2.08, 73, 39, 22],
|
||||||
|
[99, 73, 110, 2.43, 76, 48, 23],
|
||||||
|
[31, 12, 30, 0.5, 32, 16, 24],
|
||||||
|
[42, 27, 43, 1, 53, 22, 25],
|
||||||
|
[154, 117, 157, 3.05, 92, 58, 26],
|
||||||
|
[234, 185, 230, 4.09, 123, 69, 27],
|
||||||
|
[160, 120, 186, 2.77, 91, 50, 28]
|
||||||
|
];
|
||||||
|
|
||||||
|
var dataGZ = [
|
||||||
|
[84, 94, 140, 2.238, 68, 18, 22],
|
||||||
|
[93, 77, 104, 1.165, 53, 7, 23],
|
||||||
|
[99, 130, 227, 3.97, 55, 15, 24],
|
||||||
|
[146, 84, 139, 1.094, 40, 17, 25],
|
||||||
|
[113, 108, 137, 1.481, 48, 15, 26],
|
||||||
|
[81, 48, 62, 1.619, 26, 3, 27],
|
||||||
|
[56, 48, 68, 1.336, 37, 9, 28]
|
||||||
|
];
|
||||||
|
|
||||||
|
var dataSH = [
|
||||||
|
[91, 45, 125, 0.82, 34, 23, 1],
|
||||||
|
[65, 27, 78, 0.86, 45, 29, 2],
|
||||||
|
[83, 60, 84, 1.09, 73, 27, 3],
|
||||||
|
[109, 81, 121, 1.28, 68, 51, 4],
|
||||||
|
[106, 77, 114, 1.07, 55, 51, 5],
|
||||||
|
[109, 81, 121, 1.28, 68, 51, 6],
|
||||||
|
[106, 77, 114, 1.07, 55, 51, 7]
|
||||||
|
];
|
||||||
|
|
||||||
|
var lineStyle = {
|
||||||
|
normal: {
|
||||||
|
width: 1,
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
radar: {
|
||||||
|
indicator: [
|
||||||
|
{ name: "AQI", max: 300 },
|
||||||
|
{ name: "PM2.5", max: 250 },
|
||||||
|
{ name: "PM10", max: 300 },
|
||||||
|
{ name: "CO", max: 5 },
|
||||||
|
{ name: "NO2", max: 200 },
|
||||||
|
{ name: "SO2", max: 100 }
|
||||||
|
],
|
||||||
|
shape: "circle",
|
||||||
|
splitNumber: 5,
|
||||||
|
name: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(238, 197, 102)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: [
|
||||||
|
"rgba(238, 197, 102, 0.1)",
|
||||||
|
"rgba(238, 197, 102, 0.2)",
|
||||||
|
"rgba(238, 197, 102, 0.4)",
|
||||||
|
"rgba(238, 197, 102, 0.6)",
|
||||||
|
"rgba(238, 197, 102, 0.8)",
|
||||||
|
"rgba(238, 197, 102, 1)"
|
||||||
|
].reverse()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(238, 197, 102, 0.5)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "北京",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: dataBJ,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#F9713C"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "上海",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: dataSH,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#B3E4A1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.05
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "广州",
|
||||||
|
type: "radar",
|
||||||
|
lineStyle: lineStyle,
|
||||||
|
data: dataGZ,
|
||||||
|
symbol: "none",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "rgb(238, 197, 102)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0.05
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChartPieLeft.setOption(option);
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// 响应式变化
|
||||||
|
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
|
||||||
|
//侧边栏变化
|
||||||
|
if (sidebar) {
|
||||||
|
myChartPieLeft.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.onresize = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#centreRight2Chart1{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+1
-1
@@ -8,7 +8,7 @@ Vue.use(dataV)
|
|||||||
// 引入vue-awesome
|
// 引入vue-awesome
|
||||||
import Icon from 'vue-awesome/components/Icon'
|
import Icon from 'vue-awesome/components/Icon'
|
||||||
import 'vue-awesome/icons/index.js'
|
import 'vue-awesome/icons/index.js'
|
||||||
// 全局注册
|
// 全局注册图标
|
||||||
Vue.component('icon', Icon)
|
Vue.component('icon', Icon)
|
||||||
|
|
||||||
import './assets/scss/style.scss'
|
import './assets/scss/style.scss'
|
||||||
|
|||||||
@@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<div id="center">
|
||||||
|
<div class="up">
|
||||||
|
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
|
||||||
|
<p class="ml-3 fs-xl">{{item.title}}</p>
|
||||||
|
<div>
|
||||||
|
<dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="down">
|
||||||
|
<div class="ranking">
|
||||||
|
<dv-scroll-ranking-board :config="ranking"/>
|
||||||
|
</div>
|
||||||
|
<div class="percent">
|
||||||
|
<div class="item"> </div>
|
||||||
|
<div class="water">
|
||||||
|
<dv-water-level-pond :config="water" style="height: 125px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
titleItem: [
|
||||||
|
{
|
||||||
|
title: "今年累计构建次数",
|
||||||
|
number: {
|
||||||
|
number: [120],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "本月累计构建次数",
|
||||||
|
number: {
|
||||||
|
number: [18],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今日累计构建次数",
|
||||||
|
number: {
|
||||||
|
number: [2],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今年失败构建次数",
|
||||||
|
number: {
|
||||||
|
number: [14],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今年成功构建次数",
|
||||||
|
number: {
|
||||||
|
number: [106],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "今年达标组件个数",
|
||||||
|
number: {
|
||||||
|
number: [100],
|
||||||
|
toFixed: 1,
|
||||||
|
content: "{nt}"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
ranking: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "周口",
|
||||||
|
value: 55
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "南阳",
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "西峡",
|
||||||
|
value: 78
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "驻马店",
|
||||||
|
value: 66
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "新乡",
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "新乡",
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "新乡",
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "新乡",
|
||||||
|
value: 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
waitTime: 4000,
|
||||||
|
carousel: "page",
|
||||||
|
unit: "份"
|
||||||
|
},
|
||||||
|
water: {
|
||||||
|
data: [24, 45]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.up {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
.item {
|
||||||
|
border-radius: 5px;
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
width: 32%;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
padding: 0.5rem;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 250px;
|
||||||
|
justify-content: space-between;
|
||||||
|
.ranking {
|
||||||
|
width: 58%;
|
||||||
|
}
|
||||||
|
.percent {
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
height: 125px;
|
||||||
|
}
|
||||||
|
.water {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+35
-25
@@ -1,34 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="centreLeft1" class="bg-color-black">
|
<div id="centreLeft1">
|
||||||
<div class="d-flex">
|
<div class="bg-color-black">
|
||||||
<span style="color:#5cd9e8">
|
<div class="d-flex pt-2 pl-2">
|
||||||
<icon name="chart-bar"></icon>
|
<span style="color:#5cd9e8">
|
||||||
</span>
|
<icon name="chart-bar"></icon>
|
||||||
<div class="d-flex">
|
</span>
|
||||||
<span class="fs-xl text mx-2">构建通过率</span>
|
|
||||||
<dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex jc-center">
|
|
||||||
<dv-active-ring-chart class="chart-box" :config="config" />
|
|
||||||
</div>
|
|
||||||
<!-- 4个主要的数据 -->
|
|
||||||
<div class="bottom-data">
|
|
||||||
<div class="item-box" v-for="(item,index) in numberData" :key="index">
|
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="coin">￥</span>
|
<span class="fs-xl text mx-2">构建通过率</span>
|
||||||
<dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
|
<dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<centreLeft1Chart />
|
||||||
|
</div>
|
||||||
|
<!-- 4个主要的数据 -->
|
||||||
|
<div class="bottom-data">
|
||||||
|
<div class="item-box" v-for="(item,index) in numberData" :key="index">
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="coin">￥</span>
|
||||||
|
<dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
|
||||||
|
</div>
|
||||||
|
<p class="text" style="text-align: center;">
|
||||||
|
{{item.text}}
|
||||||
|
<span class="colorYellow">(件)</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="text" style="text-align: center;">
|
|
||||||
{{item.text}}
|
|
||||||
<span class="colorYellow">(件)</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import centreLeft1Chart from "@/components/echart/centreLeft1Chart";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -96,6 +99,9 @@ export default {
|
|||||||
]
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
centreLeft1Chart
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.changeTiming();
|
this.changeTiming();
|
||||||
},
|
},
|
||||||
@@ -106,8 +112,8 @@ export default {
|
|||||||
}, 3000);
|
}, 3000);
|
||||||
},
|
},
|
||||||
changeNumber() {
|
changeNumber() {
|
||||||
this.numberData.forEach(item => {
|
this.numberData.forEach((item, index) => {
|
||||||
item.number.number[0] += 1;
|
item.number.number[0] += ++index;
|
||||||
item.number = { ...item.number };
|
item.number = { ...item.number };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -118,9 +124,13 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#centreLeft1 {
|
#centreLeft1 {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
height: 400px;
|
height: 410px;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: 385px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
.text {
|
.text {
|
||||||
color: #c3cbde;
|
color: #c3cbde;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<template>
|
||||||
|
<div id="centreLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span style="color:#5cd9e8">
|
||||||
|
<icon name="chart-pie"></icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">全国数据流通情况</span>
|
||||||
|
<dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<centreLeft2Chart />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import centreLeft2Chart from "@/components/echart/centreLeft2Chart";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
centreLeft2Chart
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#centreLeft1 {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 410px;
|
||||||
|
min-width: 300px;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: 385px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 1rem;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div id="centreRight1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span style="color:#5cd9e8">
|
||||||
|
<icon name="chart-line"></icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">成功构建排行榜</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center body-box">
|
||||||
|
<dv-scroll-board :config="config" style="width:270px;height:360px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
header: ["组件", "分支", "覆盖率"],
|
||||||
|
data: [
|
||||||
|
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"],
|
||||||
|
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"],
|
||||||
|
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"],
|
||||||
|
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"],
|
||||||
|
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"],
|
||||||
|
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"],
|
||||||
|
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"],
|
||||||
|
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"],
|
||||||
|
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"],
|
||||||
|
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"]
|
||||||
|
],
|
||||||
|
rowNum: 7, //表格行数
|
||||||
|
headerHeight: 35,
|
||||||
|
headerBGC: "#0f1325", //表头
|
||||||
|
oddRowBGC: "#0f1325", //奇数行
|
||||||
|
evenRowBGC: "#171c33", //偶数行
|
||||||
|
index: true,
|
||||||
|
columnWidth: [50],
|
||||||
|
align: ["center"]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#centreRight1 {
|
||||||
|
padding: 1rem;
|
||||||
|
height: 410px;
|
||||||
|
min-width: 300px;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: 385px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div id="centreRight2">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span style="color:#5cd9e8">
|
||||||
|
<icon name="align-left"></icon>
|
||||||
|
</span>
|
||||||
|
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center body-box">
|
||||||
|
<dv-capsule-chart :config="config" style="width: 100%;height:160px" />
|
||||||
|
<!-- ---------------------------------------- -->
|
||||||
|
<centreRight2Chart1></centreRight2Chart1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "南阳",
|
||||||
|
value: 167
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "周口",
|
||||||
|
value: 67
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "漯河",
|
||||||
|
value: 123
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "郑州",
|
||||||
|
value: 55
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "西峡",
|
||||||
|
value: 98
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: { centreRight2Chart1 },
|
||||||
|
mounted() {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#centreRight2 {
|
||||||
|
padding: 5px;
|
||||||
|
height: 400px;
|
||||||
|
min-width: 300px;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
padding: 5px;
|
||||||
|
height: 405px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+34
-14
@@ -26,23 +26,26 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 第二行 -->
|
<!-- 第二行 -->
|
||||||
<div class="d-flex jc-between mt-2 px-2">
|
<div class="d-flex jc-between px-2">
|
||||||
<div class="d-flex" style="width: 40%">
|
<div class="d-flex" style="width: 40%">
|
||||||
<div class="react-right bg-color-black ml-4" style="width: 500px; ">
|
<div
|
||||||
|
class="react-right ml-4"
|
||||||
|
style="width: 500px; text-align: left;background-color: #0f1325;"
|
||||||
|
>
|
||||||
<span class="react-before"></span>
|
<span class="react-before"></span>
|
||||||
<span class="text">构建数据分析</span>
|
<span class="text fw-b">构建数据分析</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-right bg-color-black ml-3">
|
<div class="react-right ml-3" style="background-color: #0f1325;">
|
||||||
<span class="text colorBlue">构建数据分析</span>
|
<span class="text colorBlue fw-b">构建数据分析</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 40%" class="d-flex">
|
<div style="width: 40%" class="d-flex">
|
||||||
<div class="react-left bg-color-black bg-color-blue mr-3">
|
<div class="react-left bg-color-blue mr-3">
|
||||||
<span class="text fw-b">构建数据分析</span>
|
<span class="text fw-b">构建数据分析</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="react-left bg-color-black mr-4" style="width: 500px;">
|
<div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
|
||||||
<span class="react-after"></span>
|
<span class="react-after"></span>
|
||||||
<span class="text colorBlue">2020年03月16日</span>
|
<span class="text">2020年03月16日 周一 12:00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -55,11 +58,24 @@
|
|||||||
<centreLeft1 />
|
<centreLeft1 />
|
||||||
</dv-border-box-12>
|
</dv-border-box-12>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div>
|
||||||
<div class="bg-color-blue"></div>
|
<dv-border-box-12>
|
||||||
<div></div>
|
<centreLeft2 />
|
||||||
<div class="bg-color-blue"></div>
|
</dv-border-box-12>
|
||||||
<div></div>
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<center/>
|
||||||
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<centreRight2 />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-13>
|
||||||
|
<centreRight1 />
|
||||||
|
</dv-border-box-13>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 第四行数据 -->
|
<!-- 第四行数据 -->
|
||||||
@@ -75,13 +91,17 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import centreLeft1 from "./centreLeft1";
|
import centreLeft1 from "./centreLeft1";
|
||||||
|
import centreLeft2 from "./centreLeft2";
|
||||||
|
import centreRight1 from "./centreRight1";
|
||||||
|
import centreRight2 from "./centreRight2";
|
||||||
|
import center from "./center";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false
|
loading: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: { centreLeft1 },
|
components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
|
||||||
mounted() {
|
mounted() {
|
||||||
this.cancelLoading();
|
this.cancelLoading();
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user