Commit 6b59aa72 authored by 沈翠玲's avatar 沈翠玲

数据大屏

parent b7d67263
...@@ -52,7 +52,7 @@ const option: ECOption = { ...@@ -52,7 +52,7 @@ const option: ECOption = {
series: [ series: [
{ {
zlevel: 1, zlevel: 1,
name: "年龄比例", name: "案人年龄比例",
type: "pie", type: "pie",
selectedMode: "single", selectedMode: "single",
radius: [50, 90], radius: [50, 90],
...@@ -104,7 +104,7 @@ const option: ECOption = { ...@@ -104,7 +104,7 @@ const option: ECOption = {
name: "", name: "",
label: { label: {
show: true, show: true,
formatter: "{a|本日总数}", formatter: "{a|在案总数}",
rich: { rich: {
a: { a: {
align: "center", align: "center",
......
...@@ -16,17 +16,13 @@ interface ChartProp { ...@@ -16,17 +16,13 @@ interface ChartProp {
const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"]; const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"];
const annualData = [ const annualData = [
{
label: new Date().getFullYear() - 2 + "年",
value: ["184", "90", "120", "0", "30", "100", "80", "40", "20", "510", "350", "180"]
},
{ {
label: new Date().getFullYear() - 1 + "年", label: new Date().getFullYear() - 1 + "年",
value: ["118", "509", "366", "162", "380", "123", "321", "158", "352", "474", "154", "22"] value: ["20000", "19954", "19858", "21010", "20240", "20340", "20148", "20180", "20170", "19850", "20240", "20189"]
}, },
{ {
label: new Date().getFullYear() + "年", label: new Date().getFullYear() + "年",
value: ["548", "259", "113", "90", "69", "512", "23", "49", "28", "420", "313", "156"] value: ["25140", "24190"]
} }
]; ];
...@@ -118,7 +114,7 @@ const option: ECOption = { ...@@ -118,7 +114,7 @@ const option: ECOption = {
} }
], ],
yAxis: { yAxis: {
name: "(人数)", name: "(案件)",
nameTextStyle: { nameTextStyle: {
color: "#D6DFEA", color: "#D6DFEA",
fontSize: 12, fontSize: 12,
...@@ -206,12 +202,13 @@ const option: ECOption = { ...@@ -206,12 +202,13 @@ const option: ECOption = {
padding: 5px 20px; padding: 5px 20px;
background: url("../images/contrast-bg.png") no-repeat; background: url("../images/contrast-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
transform: scale(1.5);
.annual-month { .annual-month {
display: inline-block; display: inline-block;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 10px; font-size: 10px;
color: #03b8e2; color: #03b8e2;
transform: scale(0.9); //
} }
.annual-list { .annual-list {
display: flex; display: flex;
...@@ -232,7 +229,6 @@ const option: ECOption = { ...@@ -232,7 +229,6 @@ const option: ECOption = {
.year-value { .year-value {
font-size: 10px; font-size: 10px;
color: #03b8e2; color: #03b8e2;
transform: scale(0.8);
} }
.year-name { .year-name {
margin: 0 2px; margin: 0 2px;
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<!-- 热门板块 --> <!-- 热门板块 -->
<div class="echarts-header"> <div class="echarts-header">
<span>排名</span> <span>排名</span>
<span>景区</span> <span>调解中心</span>
<span>预约数量</span> <span>案件情况</span>
</div> </div>
<div class="echarts"> <div class="echarts">
<ECharts :option="option" :resize="false" /> <ECharts :option="option" :resize="false" />
...@@ -24,34 +24,34 @@ interface ChartProp { ...@@ -24,34 +24,34 @@ interface ChartProp {
const data = [ const data = [
{ {
value: 79999, value: 7587,
name: "峨眉山", name: "哈尔滨",
percentage: "80%", percentage: "78%",
maxValue: 100000 maxValue: 10000
}, },
{ {
value: 59999, value: 5231,
name: "稻城亚丁", name: "青岛",
percentage: "60%", percentage: "69%",
maxValue: 100000 maxValue: 10000
}, },
{ {
value: 49999, value: 4212,
name: "九寨沟", name: "成都",
percentage: "50%", percentage: "81%",
maxValue: 100000 maxValue: 10000
}, },
{ {
value: 39999, value: 3923,
name: "万里长城", name: "石家庄",
percentage: "40%", percentage: "65%",
maxValue: 100000 maxValue: 10000
}, },
{ {
value: 29999, value: 3409,
name: "北京故宫", name: "西安",
percentage: "30%", percentage: "59%",
maxValue: 100000 maxValue: 10000
} }
]; ];
......
...@@ -24,9 +24,9 @@ const initDate = (): string[] => { ...@@ -24,9 +24,9 @@ const initDate = (): string[] => {
}; };
const data = { const data = {
unit: ["访问量"], unit: ["每天拨打记录总额"],
data: new Array(31).fill("").map(val => { data: new Array(31).fill("").map(val => {
val = 77777; val = Math.floor(Math.random() * (11000 - 9000 + 1)) + 9000;
return val; return val;
}) })
}; };
...@@ -38,7 +38,7 @@ const option: ECOption = { ...@@ -38,7 +38,7 @@ const option: ECOption = {
formatter: params => { formatter: params => {
let tipData = (params as { name: string; value: string }[])[0]; let tipData = (params as { name: string; value: string }[])[0];
let html = `<div class="line-chart-bg"> let html = `<div class="line-chart-bg">
<span style="">${tipData.name} <i >${tipData.value}</i> 人次访问</span> <span style="">${tipData.name} <i >${tipData.value}</i> 人次拨打</span>
</div>`; </div>`;
return html; return html;
}, },
...@@ -82,11 +82,11 @@ const option: ECOption = { ...@@ -82,11 +82,11 @@ const option: ECOption = {
], ],
yAxis: data.unit.map((_val: string, index: number) => { yAxis: data.unit.map((_val: string, index: number) => {
return { return {
name: "(访问量)", name: "(每天拨打记录总额)",
nameTextStyle: { nameTextStyle: {
color: "#7ec7ff", color: "#7ec7ff",
fontSize: 12, fontSize: 12,
padding: [0, 30, -4, 0] padding: [0, 30, -4, 30]
}, },
minInterval: 1, minInterval: 1,
splitLine: { splitLine: {
......
...@@ -16,10 +16,10 @@ interface ChartProp { ...@@ -16,10 +16,10 @@ interface ChartProp {
} }
const data = [ const data = [
{ value: 40, name: "智慧文旅平台", percentage: "40%" }, { value: 680, name: "东岸科技", percentage: "68%" },
{ value: 10, name: "携程", percentage: "10%" }, { value: 190, name: "淮南紫石", percentage: "19%" },
{ value: 20, name: "飞猪", percentage: "20%" }, { value: 100, name: "泰华合众", percentage: "10%" },
{ value: 30, name: "其他渠道", percentage: "30%" } { value: 30, name: "其他", percentage: "3%" }
]; ];
const option: ECOption = { const option: ECOption = {
...@@ -31,7 +31,7 @@ const option: ECOption = { ...@@ -31,7 +31,7 @@ const option: ECOption = {
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{b} : {c}" formatter: "{b} : {c}"
}, },
legend: { legend: {
show: true, show: true,
......
<template> <template>
<!-- 实时访问 --> <!-- 实时访问 -->
<div class="actual-total"> <div class="actual-total">
<div class="expect-total">可预约总量<i>999999</i></div> <div class="expect-total">历史案人总数<i>389876</i></div>
<div class="actual-total"> <div class="actual-total">
<div v-for="(item, index) in actualTotal.split('')" :key="index" class="actual-item"> <div v-for="(item, index) in actualTotal.split('')" :key="index" class="actual-item">
{{ item }} {{ item }}
...@@ -40,7 +40,7 @@ const option = { ...@@ -40,7 +40,7 @@ const option = {
} }
}, },
{ {
text: "预约量", text: "清收比例",
left: "49%", left: "49%",
top: "25%", top: "25%",
textAlign: "center", textAlign: "center",
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="dataScreen-lf"> <div class="dataScreen-lf">
<div class="dataScreen-top"> <div class="dataScreen-top">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>实时游客统计</span> <span>实时在案案人统计</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</div> </div>
<div class="dataScreen-center"> <div class="dataScreen-center">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>男女比例</span> <span>案人性别比例</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</div> </div>
<div class="dataScreen-bottom"> <div class="dataScreen-bottom">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>年龄比例</span> <span>案人年龄比例</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
<div class="dataScreen-cb"> <div class="dataScreen-cb">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>未来30天游客量趋势图</span> <span>历史30天调解催记趋势</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<div class="dataScreen-rg"> <div class="dataScreen-rg">
<div class="dataScreen-top"> <div class="dataScreen-top">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>热门景区排行</span> <span>调解中心案件量排名</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</div> </div>
<div class="dataScreen-center"> <div class="dataScreen-center">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>年度游客量对比</span> <span>年度案件量对比</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</div> </div>
<div class="dataScreen-bottom"> <div class="dataScreen-bottom">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
<span>预约渠道数据统计</span> <span>案源数据统计</span>
<img src="./images/dataScreen-title.png" alt="" /> <img src="./images/dataScreen-title.png" alt="" />
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
......
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