Skip to content

V
vue3portal
Commit 86cad5fb authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent e4fac5df
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 207 deletions
src/viewsCN/dashboardC/layout.vue
View file @ 86cad5fb
......@@ -2,7 +2,7 @@
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-16 11:24:18
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 09:52:56
* @LastEditTime: 2023-08-17 14:10:38
* @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue
* @Description:
*
......@@ -35,7 +35,13 @@ const comps = {
const state = reactive({
systemTitleConfig: {
width: 1000,
ani:true,
width: 800,
dur: 6,
gradientReverse: true,
decoration: true,
decorationColorAlt: true,
gradientBG:true,
},
panelTitleConfig: {
......@@ -100,13 +106,13 @@ const state = reactive({
portlets: [
{
id: "l2",
title: "收支情况",
title: "最热实训榜",
component: "echartPie",
border: "blank",
},
{
id: "l3",
title: "业务收益情况",
title: "活跃教师榜",
component: "echartBarHorizScroll",
border: "blank",
},
......@@ -122,31 +128,27 @@ const state = reactive({
});
const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
const config = {
backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7,
}
</script>
<template>
<div class="screen1080C">
<div
:class="`area-box area-${area.name}`"
v-for="area in areas"
:key="area.id"
>
<div class="portlet-wrapper" v-for="item in area.portlets" :key="item.id">
<component v-if="item.border" :is="item.border">
<panelTitleB1 v-if="!item.hideTitle" :config="panelTitleConfig">{{
item.title
}}</panelTitleB1>
<div :class="`area-box area-${area.name}`" v-for="area in areas " :key="area.id">
<div class="portlet-wrapper" v-for="item in area.portlets " :key="item.id">
<aYinTechBorderA1 :config="{
...config,
title: item.title,
//decorationAlt:area?.name === 'right' ?true:false,
rotate: area?.name === 'right' ? '' : 'y'
}">
<component :is="comps[item.component]"></component>
<i>{{ item.component }}</i>
</component>
<template v-else>
<component :is="item.component"></component>
<i>{{ item.component }}</i>
</template>
</aYinTechBorderA1>
</div>
</div>
<systemTitleA3 :config="systemTitleConfig"
>教学资源库运行监测云图</systemTitleA3
>
<systemTitleA1 :config="systemTitleConfig">教学资源库运行监测云图</systemTitleA1>
<echartMap></echartMap>
</div>
</template>
......@@ -155,6 +157,7 @@ const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
z-index: 1;
padding: 60px 30px 30px 30px;
height: 100%;
.i() {
.poa;
bottom: 0;
......@@ -164,72 +167,85 @@ const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
.fc(@wh);
z-index: 10;
}
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(24, 1fr);
grid-gap: 30px;
.area-box {
.bdr(5px);
pointer-events: visible;
position: relative;
z-index: 10;
padding: 15px;
.bdFilter(5px,120%);
padding: 0;
.bdFilter(5px, 120%);
.bdr(10px);
&:before {
content: " ";
.poa;
.fullbox;
.bdFilter(10px,300%);
.bdFilter(10px, 300%);
.bdr(10px);
opacity: 0.8;
.bgc(fade(@bll8,30%));
.bd(fade(@bll8,80%));
} //
}
//
//<row-start> / <column-start> / <row-end> / <column-end>;
.blank,
.portlet-wrapper {
.por;
> i {
>i {
.i;
}
}
.border-content {
> i {
>i {
.i;
}
}
&.area-left {
grid-area: 1 / 1 / 25 / 7;
.portlet-wrapper {
&:nth-child(3) {
grid-area: 3 / 1 /5/ 2;
}
}
}
&.area-right {
grid-area: 1 / 19 / 25 / 25;
}
&.area-center {
grid-area: 19 / 7 / 25 / 19;
}
&.area-right {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}
&.area-left {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 20px;
}
&.area-center {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 20px;
.portlet-wrapper {
margin-top: -8px;
}
......@@ -240,6 +256,7 @@ const { systemTitleConfig, panelTitleConfig, areas } = toRefs(state);
left: 0;
top: 0;
}
// .systemTitle-01{left:40px; transform: none;}
}
</style>
src/viewsCN/dashboardC/portlet/echart-bar.vue
View file @ 86cad5fb
......@@ -2,7 +2,7 @@
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 09:49:08
* @LastEditTime: 2023-08-17 14:00:46
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-bar.vue
* @Description:
*
......@@ -69,8 +69,8 @@ const processOption = (dataList) => {
},
// toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
grid: {
left: '2%',
right: '5%',
left: '16px',
right: '16px',
bottom: '5%',
top: "25%",
containLabel: true
......
src/viewsCN/dashboardC/portlet/echart-barHorizScroll.vue
View file @ 86cad5fb
<script setup>
import { http } from "@/api/request";
const base64Img="image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg=="
const state=reactive({
chartData:{
yAxis:['任务A', '任务B', '任务C', '任务较长名称D', '任务E', '任务F', '任务G', '任务H', '任务I'],
color:[$c.cyl4,$c.orl5,$c.rel5],
data:[69, 96, 35,26, 96, 32 ,52 ,22 ,72]
const base64Img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg=="
const state = reactive({
chartData: {
yAxis: ['任务A', '任务B', '任务C', '任务较长名称D', '任务E', '任务F', '任务G', '任务H', '任务I'],
color: [$c.cyl4, $c.orl5, $c.rel5],
data: [69, 96, 35, 26, 96, 32, 52, 22, 72]
},
chartOption:{}
chartOption: {}
})
const fillArr=computed(()=>{
return (new Array(state.chartData.data.length)).fill(100);
})
const getSymbolData=(data)=>{
let arr = [];
......@@ -25,46 +23,45 @@ const getSymbolData=(data)=>{
return arr;
}
const processData=()=>{
let legend=state.chartData.legend,
colors=state.chartData.colors,
yAxis=state.chartData.yAxis,
data=state.chartData.data,
processedData=[];
state.chartOption.yAxis.data=state.chartData.yAxis;
state.chartOption.series[0].data=state.chartData.data;
state.chartOption.series[1].data=fillArr;
state.chartOption.series[2].data=getSymbolData(state.chartData.data);
const processData = (dataList) => {
const fulldata = dataList?.map(it => it?.count)
state.chartOption.yAxis.data = dataList?.map(it => it?.userName);
state.chartOption.series[0].data = fulldata;
state.chartOption.series[1].data = (new Array(fulldata.length)).fill(Math.max(...fulldata));
state.chartOption.series[2].data = getSymbolData(fulldata);
dataScroll();
}
const processOption=()=>{
state.chartOption={
update:false,
const processOption = (dataList) => {
const fulldata = dataList?.map(it => it?.count)
state.chartOption = {
update: true,
title: {
show:false,
show: false,
// text: '实时流速图2',
textStyle:{
color:$c.cbl5,
fontSize:16,
fontWeight:"normal"
textStyle: {
color: $c.cbl5,
fontSize: 16,
fontWeight: "normal"
},
},
grid: {
top: '15%',
left: '18%',
right: '12%',
right: '70px',
bottom: '5%'
},
tooltip: {show: false},
tooltip: { show: false },
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLine: {show: false},
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false}
max: Math.max(...fulldata),
axisLine: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false }
},
dataZoom: {
yAxisIndex: 0,
......@@ -77,29 +74,29 @@ const processOption=()=>{
//show: false,
type: 'category',
inverse: true,
splitLine: {show: false,},
axisLine: {show: false},
splitLine: { show: false, },
axisLine: { show: false },
axisLabel: {
show: true,
interval: 0,
margin: 10,
fontSize: 12,
width:50,
lineHeight:14,
overflow:"breakAll",
width: 50,
lineHeight: 14,
overflow: "breakAll",
fontWeight: 'normal',
},
axisTick: {show: false},
data:[]
axisTick: { show: false },
data: []
},
series: [
{
type: 'bar',
barWidth: '40%',
animationDuration:2000,
animationDuration: 2000,
itemStyle: {
borderWidth:0,
borderRadius:10,
borderWidth: 0,
borderRadius: 10,
color: {
type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
colorStops: [{ offset: 0, color: $c.cyl8, }, { offset: 1, color: $c.cyl4, }]
......@@ -116,7 +113,7 @@ const processOption=()=>{
animation: false,
itemStyle: {
borderWidth: 0,
borderRadius:5,
borderRadius: 5,
color: 'rgba(0,202,255,0.2)'
},
label: {
......@@ -124,8 +121,8 @@ const processOption=()=>{
position: ['101%', '20%'],
fontSize: 14,
fontWeight: 'normal',
formatter: (params)=>{
return ' ' + (state.chartData.data[params.dataIndex] ) + '%';
formatter: (params) => {
return '访问' + (fulldata[params.dataIndex]) + '次';
}
},
data: [],
......@@ -135,7 +132,7 @@ const processOption=()=>{
type: 'pictorialBar',
animation: true,
// animationThreshold: 3000 ,
animationDuration: 3000 ,
animationDuration: 3000,
// animationDurationUpdate:500,
symbol: base64Img,
symbolSize: [50, 50],
......@@ -148,27 +145,32 @@ const processOption=()=>{
},
]
}
processData();
processData(dataList);
}
const { proxy } = getCtx();
const dataScroll=()=>{
proxy.$timer("dataScrollBarHorizC",()=>{
let {data}=state.chartData
let {dataZoom}=state.chartOption
if (dataZoom.endValue == data.length ) {
const dataScroll = () => {
proxy.$timer("dataScrollBarHorizC", () => {
let { data } = state.chartData;
let { dataZoom } = state.chartOption
if (dataZoom.endValue == data.length-1) {
dataZoom.endValue = 4;
dataZoom.startValue = 0;
}else{
dataZoom.endValue ++;
dataZoom.startValue ++;
} else {
dataZoom.endValue++;
dataZoom.startValue++;
}
state.chartOption.update=true
state.chartOption.update = true
dataScroll()
},5000)
}, 5000)
}
onMounted(() => {
processOption();
http("POST", "/index/statistics/teacherVisit", {}).then((res) => {
let result = res?.data?.dataList;
state.chartData.data = result?.map(it=>it?.count);
processOption(result);
});
})
onBeforeMount(() => {
proxy.$timer("dataScrollBarHorizC")
......@@ -177,5 +179,4 @@ onBeforeMount(() => {
<template>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
<style lang="less"></style>
src/viewsCN/dashboardC/portlet/echart-gaugeTriple.vue
View file @ 86cad5fb
......@@ -2,7 +2,7 @@
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 09:53:36
* @LastEditTime: 2023-08-17 14:01:02
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-gaugeTriple.vue
* @Description:
*
......@@ -67,8 +67,8 @@ const processOption = (dataList) => {
},
// toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
grid: {
left: '2%',
right: '5%',
left: '16px',
right: '16px',
bottom: '5%',
top: "25%",
containLabel: true
......
src/viewsCN/dashboardC/portlet/echart-pie copy.vue 0 → 100644
View file @ 86cad5fb
<script setup>
import { http } from "@/api/request";
const state = reactive({
chartData: {
colors: [$c.bll5, $c.inl3, $c.aql3, $c.yel3, $c.orl3, $c.rel3, $c.aql1, $c.yel5],
},
counter: { title: "费用总量", num: 1723 },
chartOption: {}
})
const processData = (dataList) => {
let { colors } = state.chartData,
legend = dataList?.map(it=>it.trainName),
data = dataList?.map(it=>it.count),
processedData = []
legend.forEach((item, i) => {
processedData.push({
value: data[i],
name: legend[i],
itemStyle: {
color: colors[i]
}
})
})
state.chartOption.series[0].data = processedData;
state.chartOption.legend.data = legend;
}
const processOption = (dataList) => {
let legend = dataList?.map(it=>it.trainName),
data = dataList?.map(it=>it.count);
console.log(legend,data);
state.chartOption = {
update: true,
title: {
show: false,
text: "",
x: 'center',
top: '32%',
textStyle: {
color: $c.bll5,
fontSize: 24,
fontWeight: "bold",
lineHeight: 30
},
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',//horizontal
show: true,
right: '20',
top: '22%',
data: [],
formatter: (name) => {
let target;
for (let i = 0; i < data.length; i++) {
if (legend[i] == name) {
target = data[i]
}
}
return "{a|" + name + "}" + " " + "{b|" + target + "}"
},
textStyle: {
rich: {
a: {
fontSize: 14,
color: $c.bll5,
padding: 10
},
b: {
fontSize: 16,
color: $c.cyl5
}
}
}
},
series: [
{
name: '数据类别',
type: 'pie',
radius: ['55%', '80%'],
center: ['30%', '50%'],
//roseType: 'radius',
avoidLabelOverlap: false,
label: {
show: false,
position: 'outside',
},
itemStyle: {
borderRadius: 10,
borderColor: $c.bll9,
borderWidth: 5
},
emphasis: {
label: {
show: false,
fontSize: '20',
color: $c.gyd5,
}
},
labelLine: {
show: false
},
data: []
}
]
}
processData(dataList)
}
onMounted(() => {
//processOption();
http("POST", "/index/statistics/trainVisit", {}).then((res) => {
let result = res?.data?.dataList;
processOption(result);
});
});
</script>
<template>
<div class="echart-wrap-dashC">
<div class="total-digital">
<span class="desc">{{ state.counter.title }}</span>
<DigitalTransform class="counter" :value="state.counter.num" :interval="1000" :dislocation="false">
</DigitalTransform>
</div>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</div>
</template>
<style lang="less">
.echart-wrap-dashC {
height: 100%;
.total-digital {
.fc(@cyl5);
text-align: center;
width: 100px;
.poa;
top: 52%;
left: 17.5%;
.fixc("y");
.desc {
display: block;
font-size: 18px;
margin: 0 0 10px 0;
}
.counter {
display: block;
.ff("en0");
font-size: 24px;
font-weight: bold;
}
}
}</style>
src/viewsCN/dashboardC/portlet/echart-pie.vue
View file @ 86cad5fb
<script setup>
const state=reactive({
chartData:{
legend:['软件','硬件','服务','安全','广告'],
colors:[$c.bll5,$c.inl3,$c.aql3,$c.yel3,$c.orl3,$c.rel3],
data:[325,252,323,183,120,43]
},
counter:{title:"费用总量",num:1723},
chartOption:{}
import { http } from "@/api/request";
const state = reactive({
chartData: {
colors: [$c.bll5, $c.inl3, $c.aql3, $c.yel3, $c.orl3, $c.rel3, $c.aql1, $c.yel5],
},
chartOption: {}
})
const processData=()=>{
let {legend,colors,data}=state.chartData,
processedData=[]
legend.forEach((item,i)=>{
processedData.push({
value:data[i],
name:legend[i],
itemStyle:{
color:colors[i]
const processOption = (dataList) => {
let train = dataList?.map(it => it.trainName),
school = dataList?.map(it => it.schoolName),
values = dataList?.map(it => it.count);
state.chartOption = {
update:true,
grid: {
left: '16px',
right: '42px',
bottom: '0',
top: '2%',
containLabel: true
},
xAxis: [{
show: false,
},
{
show: false,
}
})
})
state.chartOption.series[0].data=processedData;
state.chartOption.legend.data=legend;
}
],
yAxis: {
type: 'category',
inverse: true,
nameGap: 16,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
data: [1,2,3,4]
},
series: [
const processOption=()=>{
state.chartOption={
update:false,
title:{
show:false,
text:"",
x:'center',
top:'32%',
textStyle:{
color:$c.bll5,
fontSize:24,
fontWeight:"bold",
lineHeight:30
},
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',//horizontal
show:true,
right: '20',
top:'22%',
data:[],
formatter:(name)=>{
let target;
for(let i=0;i<state.chartData.data.length;i++){
if(state.chartData.legend[i]==name){
target=state.chartData.data[i]
//亮色条 百分比
{
show: true,
type: 'bar',
barGap: '-100%',
barWidth: 10,
z: 2,
silent: true,
itemStyle: {
barBorderRadius: 10,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: '#275266' // 0% 处的颜色
}, {
offset: 1,
color: '#68D6DE' // 100% 处的颜色
}]
}
},
data: values,
},
{
name: '外框',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: 10,
color: 'rgba(255,255,255,0.1)' //rgba设置透明度0.14
}
return "{a|"+name+"}"+" "+"{b|"+target+"}"
},
textStyle:{
rich:{
a:{
fontSize:14,
color:$c.bll5,
padding:10
label: {
normal: {
show: true,
textStyle: {
color: '#DEDEDE',
fontSize: 14,
lineHeight: -20
},
position: ['90%', -20],
formatter: function (data) {
return '访问' + "{blue|" + (values[data.dataIndex]) + "}" + '次';
},
b:{
fontSize:16,
color:$c.cyl5
rich: {
blue: {
fontSize: 14,
lineHeight: 5,
color: '#62E6F6',
}
}
}
},
series: [
barGap: '-100%',
z: 0,
barWidth: 10,
data: values?.map(it=>{
return Math.max(...values)
})
},
//年份
{
name:'数据类别',
type:'pie',
radius: ['55%', '80%'],
center: ['30%', '50%'],
//roseType: 'radius',
avoidLabelOverlap: false,
show: true,
type: 'bar',
xAxisIndex: 1, //代表使用第二个X轴刻度
barGap: '-100%',
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 0,
color: 'transparent',
}
},
label: {
show: false,
position: 'outside',
normal: {
show: true,
position: [0, '-20'],
textStyle: {
fontSize: 14,
color: '#fff',
lineHeight: -20
},
itemStyle: {
borderRadius: 10,
borderColor: $c.bll9,
borderWidth: 5
formatter: function (data) {
var result = ''
result += train[data.dataIndex] + "{mr|" + "学校：" + "}" + "{blue|" + school[data.dataIndex] + "}";
return result
},
emphasis: {
label:{
show: false,
fontSize: '20',
color:$c.gyd5,
}
rich: {
blue: {
fontSize: 14,
lineHeight: 5,
color: '#62E6F6'
},
labelLine: {
show: false
mr: {
padding: [0, 0, 0, 10],
fontSize: 14,
color: '#fff'
}
}
}
},
data:[]
data: values
}
]
}
processData()
}
onMounted(() => {
processOption();
})
//processOption();
http("POST", "/index/statistics/trainVisit", {}).then((res) => {
let result = res?.data?.dataList;
processOption(result);
});
});
</script>
<template>
<div class="echart-wrap-dashC">
<div class="total-digital">
<span class="desc">{{state.counter.title}}</span>
<DigitalTransform class="counter" :value="state.counter.num" :interval="1000" :dislocation="false" ></DigitalTransform>
</div>
<div style="margin-top: 24px;height: 100%;width:100%">
<echartsInit :chartOption="state.chartOption"></echartsInit>
</div>
</template>
<style lang="less">
.echart-wrap-dashC{height: 100%;
.total-digital{.fc(@cyl5); text-align: center; width: 100px; .poa; top:52%; left:17.5%; .fixc("y");
.desc{display:block; font-size: 18px; margin:0 0 10px 0;}
.counter{display:block; .ff("en0"); font-size: 24px; font-weight: bold;}
}
}
</style>
src/viewsCN/dashboardC/portlet/echart-sunburst.vue
View file @ 86cad5fb
......@@ -2,7 +2,7 @@
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 10:54:08
* @LastEditTime: 2023-08-17 14:01:18
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-sunburst.vue
* @Description:
*
......@@ -52,8 +52,8 @@ const processOption = (datas) => {
show: false,
},
grid: {
left: 0,
right: 30,
left: '16px',
right: '16px',
bottom: 20,
containLabel: true,
},
......
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