第二层图标
This commit is contained in:
MTrunning
Generated
+39
@@ -1119,6 +1119,14 @@
|
||||
"integrity": "sha1-HBJhu+qhCoBVu8XYq4S3sq/IRqA=",
|
||||
"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": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/@types/events/download/@types/events-3.0.0.tgz",
|
||||
@@ -1160,6 +1168,11 @@
|
||||
"integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
|
||||
"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": {
|
||||
"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",
|
||||
@@ -4073,6 +4086,14 @@
|
||||
"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": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
|
||||
@@ -7617,6 +7638,11 @@
|
||||
"dev": 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": {
|
||||
"version": "1.2.13",
|
||||
"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",
|
||||
"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": {
|
||||
"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",
|
||||
@@ -11869,6 +11903,11 @@
|
||||
"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": {
|
||||
"@jiaminghi/data-view": "^2.7.3",
|
||||
"@types/echarts": "^4.4.3",
|
||||
"core-js": "^3.6.4",
|
||||
"echarts": "^4.6.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-awesome": "^4.0.2",
|
||||
"vue-router": "^3.1.5",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
|
||||
@@ -63,7 +63,7 @@ a {
|
||||
}
|
||||
|
||||
.bg-color-black {
|
||||
background-color: #0f1325;
|
||||
background-color: rgba(19, 25, 47, .5);
|
||||
}
|
||||
|
||||
.bg-color-blue {
|
||||
@@ -79,6 +79,22 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.colorGrass {
|
||||
color: #33CEA0;
|
||||
|
||||
&:hover {
|
||||
color: #33CEA0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.colorRed {
|
||||
color: #ff5722;
|
||||
|
||||
&:hover {
|
||||
color: #ff5722 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.colorText {
|
||||
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
|
||||
import Icon from 'vue-awesome/components/Icon'
|
||||
import 'vue-awesome/icons/index.js'
|
||||
// 全局注册
|
||||
// 全局注册图标
|
||||
Vue.component('icon', Icon)
|
||||
|
||||
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>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div id="centreLeft1" class="bg-color-black">
|
||||
<div class="d-flex">
|
||||
<div id="centreLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
</span>
|
||||
@@ -10,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
<dv-active-ring-chart class="chart-box" :config="config" />
|
||||
<centreLeft1Chart />
|
||||
</div>
|
||||
<!-- 4个主要的数据 -->
|
||||
<div class="bottom-data">
|
||||
@@ -26,9 +27,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centreLeft1Chart from "@/components/echart/centreLeft1Chart";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -96,6 +99,9 @@ export default {
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
centreLeft1Chart
|
||||
},
|
||||
mounted() {
|
||||
this.changeTiming();
|
||||
},
|
||||
@@ -106,8 +112,8 @@ export default {
|
||||
}, 3000);
|
||||
},
|
||||
changeNumber() {
|
||||
this.numberData.forEach(item => {
|
||||
item.number.number[0] += 1;
|
||||
this.numberData.forEach((item, index) => {
|
||||
item.number.number[0] += ++index;
|
||||
item.number = { ...item.number };
|
||||
});
|
||||
}
|
||||
@@ -118,9 +124,13 @@ export default {
|
||||
<style lang="scss">
|
||||
#centreLeft1 {
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
height: 410px;
|
||||
min-width: 300px;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 385px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
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 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="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="text">构建数据分析</span>
|
||||
<span class="text fw-b">构建数据分析</span>
|
||||
</div>
|
||||
<div class="react-right bg-color-black ml-3">
|
||||
<span class="text colorBlue">构建数据分析</span>
|
||||
<div class="react-right ml-3" style="background-color: #0f1325;">
|
||||
<span class="text colorBlue fw-b">构建数据分析</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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="text colorBlue">2020年03月16日</span>
|
||||
<span class="text">2020年03月16日 周一 12:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,11 +58,24 @@
|
||||
<centreLeft1 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="bg-color-blue"></div>
|
||||
<div></div>
|
||||
<div class="bg-color-blue"></div>
|
||||
<div></div>
|
||||
<div>
|
||||
<dv-border-box-12>
|
||||
<centreLeft2 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div>
|
||||
<center/>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div>
|
||||
<centreRight2 />
|
||||
</div>
|
||||
<div>
|
||||
<dv-border-box-13>
|
||||
<centreRight1 />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
@@ -75,13 +91,17 @@
|
||||
|
||||
<script>
|
||||
import centreLeft1 from "./centreLeft1";
|
||||
import centreLeft2 from "./centreLeft2";
|
||||
import centreRight1 from "./centreRight1";
|
||||
import centreRight2 from "./centreRight2";
|
||||
import center from "./center";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
components: { centreLeft1 },
|
||||
components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
|
||||
mounted() {
|
||||
this.cancelLoading();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user