Skip to content

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

asder

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