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(() => {
textStyle: {
color: '#fff', //百分比颜色
},
position: ['0', 5],
position: ['50%', 5],
align: 'center',
//百分比格式
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(() => {
color: '#ffffff',
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) {
//富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) {
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 + '}';
}
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
},
}
},
......@@ -241,6 +217,35 @@ const option = computed(() => {
z: 1,
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 = () => {
dataZoom.value.endValue = 3;
}
// chart?.setOption(option);
}, 3000);
}, 1000);
}
}
......@@ -281,7 +286,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
</script>
<style lang="scss" scoped>
......
src/views/data-screen-mock/components/ChinaMapChart.vue
View file @ 86929560
......@@ -133,7 +133,7 @@ timer.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
let legend=['案件量', '案件总金额'];
let textColor = "#fff";
let lineColor="rgba(255,255,255,0.2)";
......@@ -179,7 +179,7 @@ const option = computed(() => {
width: '10%'
}, {
show: false,
left: '81%',
left: '80%',
top: '5%',
bottom: '48%',
width: '0%'
......@@ -240,7 +240,7 @@ const option = computed(() => {
yAxis: [{
type: 'category',
inverse: true,
position: 'right',
position: 'center',
interval: 1000,
axisLine: {
show: false,
......@@ -260,7 +260,7 @@ const option = computed(() => {
gridIndex: 1,
type: 'category',
inverse: true,
position: 'left',
position: 'center',
axisLine: {
show: false
},
......@@ -289,7 +289,7 @@ const option = computed(() => {
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
position: 'center',
axisLine: {
show: false,
lineStyle:{
......@@ -468,7 +468,7 @@ const option = computed(() => {
label: {
normal: {
align: 'right',
show: true,
show: false,
fontSize: 14,
color: '#ffffff'
}
......@@ -512,7 +512,7 @@ const option = computed(() => {
label: {
normal: {
position: ['0', 1],
show: true,
show: false,
fontSize: 14,
color: '#ffffff'
}
......
src/views/data-screen-mock/components/HotPlateChart.vue
View file @ 86929560
......@@ -112,10 +112,15 @@ const option = computed(() => {
textStyle: {
color: '#fff', //百分比颜色
},
position: ['0', 5],
position: ['50%', 5],
align: 'center',
//百分比格式
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(() => {
color: '#ffffff',
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) {
//富文本固定格式{colorName|这里填你想要写的内容}
if (data.dataIndex == 0) {
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 + '}';
}
return '{start2|}{white|' + (data.dataIndex + 1) + ' ' + salvProValue.value[data.dataIndex].name + '}';
},
}
......@@ -228,6 +205,35 @@ const option = computed(() => {
z: 1,
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 => {
dataZoom.value.endValue = 3;
}
// chart?.setOption(option);
}, 3000);
}, 1000);
}
}
})
......@@ -267,7 +273,7 @@ getReturnRateByPlatform(param).then(res => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
</script>
<style lang="scss" scoped>
.echarts {
......
src/views/data-screen-mock/components/MaleFemaleRatioChart.vue
View file @ 86929560
......@@ -90,7 +90,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
const option = computed(() => {
......
src/views/data-screen-mock/components/OverNext30Chart.vue
View file @ 86929560
......@@ -71,7 +71,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
watch(
() => props.dayActiveName,
(newValue, oldValue) => {
......@@ -113,9 +113,10 @@ const option = computed(() => {
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "15%"
left: "1%",
right: "1%",
containLabel: true,
bottom: "1%"
},
xAxis: [
{
......@@ -123,23 +124,18 @@ const option = computed(() => {
boundaryGap: false,
axisLine: {
show: true,
symbol: ["none", "arrow"],
symbolOffset: [0, 30],
lineStyle: {
color: "#233653",
shadowOffsetX: 20,
shadowColor: "#233653"
color: "#f9f9f9"
}
},
axisLabel: {
color: "#fff",
color: "#d1e6eb",
padding: 0,
fontSize: 14,
formatter: function (data) {
return data;
}
},
splitLine: { show: false, lineStyle: { color: "#192a44" } },
axisTick: { show: false },
data: dates.value
}
......@@ -153,20 +149,17 @@ const option = computed(() => {
},
minInterval: 1,
splitLine: {
show: false,
show: true,
lineStyle: {
color: "#fff"
color: "#0a3256"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#fff"
}
show: false
},
axisLabel: {
show: true,
color: "#fff",
color: "#d1e6eb",
fontSize: 14,
padding: 0,
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 @@
background: url("./images/qiu.png") no-repeat;
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 {
position: absolute;
width: 100%;
......@@ -29,7 +46,7 @@
z-index: -1;
padding-top: 250px;
transform: scale(1, 0.3) translate(-9%, -64%);
opacity: 0.5;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
......@@ -39,7 +56,7 @@
}
.lines1 {
animation: scales2 60s linear infinite;
width: 850px;
width: 950px;
margin-left: -3px;
margin-top: -7px;
}
......
src/views/data-screen-mock/index.vue
View file @ 86929560
......@@ -70,9 +70,13 @@
<ChinaMapChart />
<div class="linebox">
<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 class="qiu"></div>
</div>
<div class="dataScreen-map" v-else>
<div class="dataScreen-map-title">当日跟进分析</div>
......@@ -257,7 +261,7 @@ timer1.value = setInterval(() => {
if (!load.value) {
query()
}
}, 3000)
}, 6000)
// 获取当前时间
let timer = null;
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