Skip to content

Y
yishuju-ui
Commit 86929560 authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

演示大屏

parent a6123149
Hide whitespace changes
Inline Side-by-side
Showing with 1371 additions and 98 deletions
src/views/data-screen-mock/components/AnnualUseChart.vue
View file @ 86929560
...@@ -125,10 +125,15 @@ const option = computed(() => { ...@@ -125,10 +125,15 @@ const option = computed(() => {
textStyle: { textStyle: {
color: '#fff', //百分比颜色 color: '#fff', //百分比颜色
}, },
position: ['0', 5], position: ['50%', 5],
align: 'center',
//百分比格式 //百分比格式
formatter: function(data) { formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%'; if ((salvProValue.value[data.dataIndex].rate).toFixed(2) === '100.00') {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
} else {
return ''
}
}, },
} }
}, },
...@@ -162,40 +167,11 @@ const option = computed(() => { ...@@ -162,40 +167,11 @@ const option = computed(() => {
color: '#ffffff', color: '#ffffff',
fontSize: 16, fontSize: 16,
},
green: {
color: '#70DDA7',
fontSize: 16,
},
yellow: {
color: '#CCB877',
fontSize: 16,
},
red: {
color: '#BC3C47',
fontSize: 16,
},
gray: {
color: '#727CBA',
fontSize: 16,
} }
}, },
formatter: function(data) { formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容} //富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) { return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
return '{start1|}{red|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else if (data.dataIndex == 1) {
return '{start1|}{yellow|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else if (data.dataIndex == 2) {
return '{start1|}{green|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else {
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
}
}, },
} }
}, },
...@@ -241,6 +217,35 @@ const option = computed(() => { ...@@ -241,6 +217,35 @@ const option = computed(() => {
z: 1, z: 1,
data: salvProValue.value.map(v => 100) data: salvProValue.value.map(v => 100)
}, },
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '0', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
},
label: {
normal: {
fontSize: 14,
show: true,
textStyle: {
color: '#fff', //百分比颜色
},
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
},
}
},
z: 3,
data: salvProValue.value.map(v => 100)
},
] ]
} }
}) })
...@@ -270,7 +275,7 @@ const query = () => { ...@@ -270,7 +275,7 @@ const query = () => {
dataZoom.value.endValue = 3; dataZoom.value.endValue = 3;
} }
// chart?.setOption(option); // chart?.setOption(option);
}, 3000); }, 1000);
} }
} }
...@@ -281,7 +286,7 @@ timer1.value = setInterval(() => { ...@@ -281,7 +286,7 @@ timer1.value = setInterval(() => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/data-screen-mock/components/ChinaMapChart.vue
View file @ 86929560
...@@ -133,7 +133,7 @@ timer.value = setInterval(() => { ...@@ -133,7 +133,7 @@ timer.value = setInterval(() => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
let legend=['案件量', '案件总金额']; let legend=['案件量', '案件总金额'];
let textColor = "#fff"; let textColor = "#fff";
let lineColor="rgba(255,255,255,0.2)"; let lineColor="rgba(255,255,255,0.2)";
...@@ -179,7 +179,7 @@ const option = computed(() => { ...@@ -179,7 +179,7 @@ const option = computed(() => {
width: '10%' width: '10%'
}, { }, {
show: false, show: false,
left: '81%', left: '80%',
top: '5%', top: '5%',
bottom: '48%', bottom: '48%',
width: '0%' width: '0%'
...@@ -240,7 +240,7 @@ const option = computed(() => { ...@@ -240,7 +240,7 @@ const option = computed(() => {
yAxis: [{ yAxis: [{
type: 'category', type: 'category',
inverse: true, inverse: true,
position: 'right', position: 'center',
interval: 1000, interval: 1000,
axisLine: { axisLine: {
show: false, show: false,
...@@ -260,7 +260,7 @@ const option = computed(() => { ...@@ -260,7 +260,7 @@ const option = computed(() => {
gridIndex: 1, gridIndex: 1,
type: 'category', type: 'category',
inverse: true, inverse: true,
position: 'left', position: 'center',
axisLine: { axisLine: {
show: false show: false
}, },
...@@ -289,7 +289,7 @@ const option = computed(() => { ...@@ -289,7 +289,7 @@ const option = computed(() => {
gridIndex: 2, gridIndex: 2,
type: 'category', type: 'category',
inverse: true, inverse: true,
position: 'left', position: 'center',
axisLine: { axisLine: {
show: false, show: false,
lineStyle:{ lineStyle:{
...@@ -468,7 +468,7 @@ const option = computed(() => { ...@@ -468,7 +468,7 @@ const option = computed(() => {
label: { label: {
normal: { normal: {
align: 'right', align: 'right',
show: true, show: false,
fontSize: 14, fontSize: 14,
color: '#ffffff' color: '#ffffff'
} }
...@@ -512,7 +512,7 @@ const option = computed(() => { ...@@ -512,7 +512,7 @@ const option = computed(() => {
label: { label: {
normal: { normal: {
position: ['0', 1], position: ['0', 1],
show: true, show: false,
fontSize: 14, fontSize: 14,
color: '#ffffff' color: '#ffffff'
} }
......
src/views/data-screen-mock/components/HotPlateChart.vue
View file @ 86929560
...@@ -112,10 +112,15 @@ const option = computed(() => { ...@@ -112,10 +112,15 @@ const option = computed(() => {
textStyle: { textStyle: {
color: '#fff', //百分比颜色 color: '#fff', //百分比颜色
}, },
position: ['0', 5], position: ['50%', 5],
align: 'center',
//百分比格式 //百分比格式
formatter: function(data) { formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%'; if ((salvProValue.value[data.dataIndex].rate).toFixed(2) === '100.00') {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
} else {
return ''
}
}, },
} }
}, },
...@@ -149,39 +154,11 @@ const option = computed(() => { ...@@ -149,39 +154,11 @@ const option = computed(() => {
color: '#ffffff', color: '#ffffff',
fontSize: 16, fontSize: 16,
},
green: {
color: '#70DDA7',
fontSize: 16,
},
yellow: {
color: '#CCB877',
fontSize: 16,
},
red: {
color: '#BC3C47',
fontSize: 16,
},
gray: {
color: '#727CBA',
fontSize: 16,
} }
}, },
formatter: function(data) { formatter: function(data) {
//富文本固定格式{colorName|这里填你想要写的内容} //富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) { return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
return '{start1|}{red|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else if (data.dataIndex == 1) {
return '{start1|}{yellow|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else if (data.dataIndex == 2) {
return '{start1|}{green|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
} else {
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
}
}, },
} }
...@@ -228,6 +205,35 @@ const option = computed(() => { ...@@ -228,6 +205,35 @@ const option = computed(() => {
z: 1, z: 1,
data: salvProValue.value.map(v => 100) data: salvProValue.value.map(v => 100)
}, },
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: '0', //统计条宽度
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(102, 102, 102,0.5)'
},
},
label: {
normal: {
fontSize: 14,
show: true,
textStyle: {
color: '#fff', //百分比颜色
},
position: ['50%', 5],
align: 'center',
//百分比格式
formatter: function(data) {
return (salvProValue.value[data.dataIndex].rate).toFixed(2) + '%';
},
}
},
z: 3,
data: salvProValue.value.map(v => 100)
},
] ]
} }
}) })
...@@ -257,7 +263,7 @@ getReturnRateByPlatform(param).then(res => { ...@@ -257,7 +263,7 @@ getReturnRateByPlatform(param).then(res => {
dataZoom.value.endValue = 3; dataZoom.value.endValue = 3;
} }
// chart?.setOption(option); // chart?.setOption(option);
}, 3000); }, 1000);
} }
} }
}) })
...@@ -267,7 +273,7 @@ getReturnRateByPlatform(param).then(res => { ...@@ -267,7 +273,7 @@ getReturnRateByPlatform(param).then(res => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts { .echarts {
......
src/views/data-screen-mock/components/MaleFemaleRatioChart.vue
View file @ 86929560
...@@ -90,7 +90,7 @@ timer1.value = setInterval(() => { ...@@ -90,7 +90,7 @@ timer1.value = setInterval(() => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
const option = computed(() => { const option = computed(() => {
......
src/views/data-screen-mock/components/OverNext30Chart.vue
View file @ 86929560
...@@ -71,7 +71,7 @@ timer1.value = setInterval(() => { ...@@ -71,7 +71,7 @@ timer1.value = setInterval(() => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
watch( watch(
() => props.dayActiveName, () => props.dayActiveName,
(newValue, oldValue) => { (newValue, oldValue) => {
...@@ -113,9 +113,10 @@ const option = computed(() => { ...@@ -113,9 +113,10 @@ const option = computed(() => {
}, },
grid: { grid: {
top: "15%", top: "15%",
left: "5%", left: "1%",
right: "5%", right: "1%",
bottom: "15%" containLabel: true,
bottom: "1%"
}, },
xAxis: [ xAxis: [
{ {
...@@ -123,23 +124,18 @@ const option = computed(() => { ...@@ -123,23 +124,18 @@ const option = computed(() => {
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
show: true, show: true,
symbol: ["none", "arrow"],
symbolOffset: [0, 30],
lineStyle: { lineStyle: {
color: "#233653", color: "#f9f9f9"
shadowOffsetX: 20,
shadowColor: "#233653"
} }
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "#d1e6eb",
padding: 0, padding: 0,
fontSize: 14, fontSize: 14,
formatter: function (data) { formatter: function (data) {
return data; return data;
} }
}, },
splitLine: { show: false, lineStyle: { color: "#192a44" } },
axisTick: { show: false }, axisTick: { show: false },
data: dates.value data: dates.value
} }
...@@ -153,20 +149,17 @@ const option = computed(() => { ...@@ -153,20 +149,17 @@ const option = computed(() => {
}, },
minInterval: 1, minInterval: 1,
splitLine: { splitLine: {
show: false, show: true,
lineStyle: { lineStyle: {
color: "#fff" color: "#0a3256"
} }
}, },
axisLine: { axisLine: {
show: true, show: false
lineStyle: {
color: "#fff"
}
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: "#fff", color: "#d1e6eb",
fontSize: 14, fontSize: 14,
padding: 0, padding: 0,
formatter: function (value) { formatter: function (value) {
......
src/views/data-screen-mock/images/animation.svg 0 → 100644
View file @ 86929560
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/data-screen-mock/index.scss
View file @ 86929560
...@@ -21,6 +21,23 @@ ...@@ -21,6 +21,23 @@
background: url("./images/qiu.png") no-repeat; background: url("./images/qiu.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.bg2 {
position: absolute;
width: 100%;
pointer-events: none;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: .05;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
img {
width: 800px;
}
}
.linebox { .linebox {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -29,7 +46,7 @@ ...@@ -29,7 +46,7 @@
z-index: -1; z-index: -1;
padding-top: 250px; padding-top: 250px;
transform: scale(1, 0.3) translate(-9%, -64%); transform: scale(1, 0.3) translate(-9%, -64%);
opacity: 0.5; opacity: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -39,7 +56,7 @@ ...@@ -39,7 +56,7 @@
} }
.lines1 { .lines1 {
animation: scales2 60s linear infinite; animation: scales2 60s linear infinite;
width: 850px; width: 950px;
margin-left: -3px; margin-left: -3px;
margin-top: -7px; margin-top: -7px;
} }
......
src/views/data-screen-mock/index.vue
View file @ 86929560
...@@ -70,9 +70,13 @@ ...@@ -70,9 +70,13 @@
<ChinaMapChart /> <ChinaMapChart />
<div class="linebox"> <div class="linebox">
<img src="./images/lines1.png" alt="" class="lines1"> <img src="./images/lines1.png" alt="" class="lines1">
<img src="./images/lines3.png" alt="" class="lines3"> <img src="./images/xuan.png" alt="" class="lines3">
</div>
<div class="qiu">
</div>
<div class="bg2">
<img src="./images/animation.svg" alt="" srcset="">
</div> </div>
<div class="qiu"></div>
</div> </div>
<div class="dataScreen-map" v-else> <div class="dataScreen-map" v-else>
<div class="dataScreen-map-title">当日跟进分析</div> <div class="dataScreen-map-title">当日跟进分析</div>
...@@ -257,7 +261,7 @@ timer1.value = setInterval(() => { ...@@ -257,7 +261,7 @@ timer1.value = setInterval(() => {
if (!load.value) { if (!load.value) {
query() query()
} }
}, 3000) }, 6000)
// 获取当前时间 // 获取当前时间
let timer = null; let timer = null;
let time = ref(dayjs().format("YYYY年MM月DD HH:mm:ss")); let time = ref(dayjs().format("YYYY年MM月DD HH:mm:ss"));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment