Skip to content

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

asdre

parent 01177aa1
Hide whitespace changes
Inline Side-by-side
Showing with 331 additions and 241 deletions
src/viewsCN/dashboardC/layout.vue
View file @ e4fac5df
...@@ -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-16 17:07:28 * @LastEditTime: 2023-08-17 09:52:56
* @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue * @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue
* @Description: * @Description:
* *
...@@ -77,19 +77,19 @@ const state = reactive({ ...@@ -77,19 +77,19 @@ const state = reactive({
portlets: [ portlets: [
{ {
id: "r1", id: "r1",
title: "销售情况", title: "注册用户年度分布(人)",
component: "echartBar", component: "echartBar",
border: "blank", border: "blank",
}, },
{ {
id: "r2", id: "r2",
title: "任务完成情况", title: "年度访问量(次)",
component: "echartGaugeTriple", component: "echartGaugeTriple",
border: "blank", border: "blank",
}, },
{ {
id: "r3", id: "r3",
title: "开支占比", title: "学校使用排名",
component: "echartSunburst", component: "echartSunburst",
border: "blank", border: "blank",
}, },
......
src/viewsCN/dashboardC/portlet/echart-bar.vue
View file @ e4fac5df
<!--
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 09:49:08
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-bar.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup> <script setup>
const state=reactive({ import { http } from "@/api/request";
chartData:{
legend:['本地视频会议', '异地视频会议'],
xAxis:['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
colors:[$c.bll4,$c.aql4,$c.ipl3,$c.cbl3,], const state = reactive({
data:[ chartData: {
[235, 210, 187, 212, 278, 220, 320, 302], legend: ['注册用户年度分布'],
[68, 121, 34, 56, 23, 120, 132, 101, 134] colors: [$c.bll4, $c.aql4, $c.ipl3, $c.cbl3,],
],
}, },
chartOption:{} chartOption: {}
}) })
const processData=()=>{ const processData = (dataList) => {
let legend=state.chartData.legend, let legend = state.chartData.legend,
colors=state.chartData.colors, colors = state.chartData.colors,
xAxis=state.chartData.xAxis, processedData = []
data=state.chartData.data, legend.forEach((item, i) => {
processedData=[]
legend.forEach((item,i)=>{
processedData.push({ processedData.push({
name: legend[i], name: legend[i],
type: 'bar', type: 'bar',
// barWidth:10, barWidth: 10,
label: { label: {
show: false, show: false,
position: 'insideRight' position: 'insideRight'
}, },
itemStyle:{ itemStyle: {
color: colors[i], color: colors[i],
borderRadius: 5 borderRadius: 5
}, },
data: data[i] data: dataList?.map((item) => {
return item.value;
})
}) })
}) })
state.chartOption.series=processedData; state.chartOption.series = processedData;
state.chartOption.xAxis.data=xAxis; state.chartOption.xAxis.data = dataList?.map(it => it.label);
state.chartOption.legend.data=legend; state.chartOption.legend.data = legend;
state.chartOption.legend.show = false;
} }
const processOption=()=>{ const processOption = (dataList) => {
state.chartOption={ console.log(0);
update:false, state.chartOption = {
update: true,
// title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, }, // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -50,10 +62,10 @@ const processOption=()=>{ ...@@ -50,10 +62,10 @@ const processOption=()=>{
} }
}, },
legend: { legend: {
show:true, show: true,
data: [], data: [],
top:0, top: 0,
right:10, right: 10,
}, },
// toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, }, // toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
grid: { grid: {
...@@ -66,24 +78,27 @@ const processOption=()=>{ ...@@ -66,24 +78,27 @@ const processOption=()=>{
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 3, splitNumber: 3,
axisLabel: { align: 'right' } axisLabel: { align: 'right' },
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: [], data: [],
axisLabel: { align: 'center' } axisLabel: { align: 'center' },
}, },
series: [] series: []
} }
processData() processData(dataList)
} }
onMounted(() => { onMounted(() => {
processOption(); //processOption();
http("POST", "/index/statistics/register", {}).then((res) => {
processOption(res?.data?.dataList);
})
}) })
</script> </script>
<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 @ e4fac5df
<!--
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 09:53:36
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-gaugeTriple.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup> <script setup>
const state=reactive({ import { http } from "@/api/request";
chartData:{
title:"任务完成情况",
legend:['开发任务1','采购任务2','销售任务3'],
const state = reactive({
chartData: {
legend: ['年度访问量'],
colors:[$c.aql4, $c.cyl4,$c.cbl3], colors:[$c.aql4, $c.cyl4,$c.cbl3],
colorsD:[$c.aql8,$c.cyl8,$c.bll8],
data:[72,14,36],
radius:["60%","75%","60%"],
position:[
['17%', '55%'],
['50%', '55%'],
['83%', '55%'],
],
}, },
chartOption:{} chartOption: {}
}) })
const processData = (dataList) => {
const processData=()=>{ let legend = state.chartData.legend,
const {legend,colors,colorsD,data,radius,position}=state.chartData; colors = state.chartData.colors,
let processedData=[], processedData = []
type="bar", legend.forEach((item, i) => {
yAxisIndex=0;
legend.forEach((item,i)=>{
processedData.push({ processedData.push({
type: 'gauge', name: legend[i],
startAngle: 90, type: 'line',
endAngle: -270, label: {
center: position[i], show: false,
radius: radius[i], position: 'insideRight'
pointer: { show: false }, },
title: { fontSize: 14 },
itemStyle: { itemStyle: {
color: colors[i], color: colors[i],
shadowColor: colors[i], borderRadius: 5
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {}
}, },
detail: { data: dataList?.map((item) => {
width: 50, return item.value;
height: 14, })
borderColor: 'inherit',
borderRadius: 20,
borderWidth: 0,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
rich: {
value: { fontSize: 24, color:colors[i], fontWeight: 'bolder'},// color: '#999',
unit: { fontSize: 12, color:$c.darken(colors[i],1),}
}
},
axisLine: {
lineStyle: {color: [[1, $c.darken(colors[i],4)]], width:10 }
},
splitLine: { show: false, distance: 0, length: 10 },
axisTick: { show: false },
axisLabel: { show: false, distance: 50 },
data:[
{
value: data[i],
name: legend[i],
title: { color:$c.lighten(colors[i],1), offsetCenter: ['0%', '30%'] },
detail: { valueAnimation: true, offsetCenter: ['0', '-30%'] }
}
],
}) })
}) })
state.chartOption.series=processedData; state.chartOption.series = processedData;
state.chartOption.xAxis.data = dataList?.map(it => it.label);
state.chartOption.legend.data = legend;
state.chartOption.legend.show = false;
} }
const processOption=()=>{ const processOption = (dataList) => {
state.chartOption={ state.chartOption = {
update:false, update: true,
// title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: true,
data: [],
top: 0,
right: 10,
},
// toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
grid: {
left: '2%',
right: '5%',
bottom: '5%',
top: "25%",
containLabel: true
},
yAxis: {
type: 'value',
splitNumber: 3,
axisLabel: { align: 'right',color:$c.aql4 }
},
xAxis: {
type: 'category',
data: [],
axisLabel: { align: 'center',color:$c.aql4 }
},
series: [] series: []
} }
processData() processData(dataList)
} }
onMounted(() => { onMounted(() => {
processOption(); //processOption();
http("POST", "/index/statistics/yearVisit", {}).then((res) => {
processOption(res?.data?.dataList);
})
}) })
</script> </script>
<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-sunburst.vue
View file @ e4fac5df
<!--
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-08 09:18:08
* @LastEditors: wuhao930406 1148547900@qq.com
* @LastEditTime: 2023-08-17 10:54:08
* @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-sunburst.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup> <script setup>
const { proxy } = getCtx(); import { http } from "@/api/request";
const state=reactive({ var colorList = [
fontColor:$c.wh, "rgba(211, 68, 53, 1)",
subFontColor:$c.cbl3, "rgba(228, 133, 48, 1)",
chartData:{ "rgba(231, 185, 44, 1)",
title:"业务利润占比", "rgba(23, 165, 213, 1)",
colors:[$c.aql7, $c.cyl5], "rgba(23, 165, 213, 1)",
data:[
{ "rgba(23, 165, 213, 1)",
name: '软件',
children: [ "rgba(23, 165, 213, 1)",
{
name: '产品',value:123, "rgba(23, 165, 213, 1)",
children: [ "rgba(23, 165, 213, 1)",
{ name: 'GIS系统', value: 49 }, "rgba(23, 165, 213, 1)",
{ name: '可视化', value: 25}, "rgba(23, 165, 213, 1)",
{ name: '财务系统', value: 11 }
]
},
{
name: '定制',value:90,
children: [
{ name: '业务系统', value: 35 },
{ name: '门户', value:15 }
]
}
]
},
{
name: '硬件', children: [
{
name: '服务器',value:230, children: [
{ name: '入门级', value: 43 },
{ name: '企业级', value: 121 }
]
},
{
name: '网管设备',value:55, children: [
{ name: '安全网关', value: 23 },
{ name: '路由器', value: 12 }
]
}
]
}
],
dataMax:300
},
chartOption:{},
dataOri:[]
})
const {dataOri,fontColor,subFontColor}=toRefs(state) ];
const mapLinkAction=(data,time)=>{ const state = reactive({
const {chartData}=state chartOption: {},
data.forEach((item,i)=>{ });
if(time==1&&item.value){
let rmdval=i*proxy.randomNumber(time*10,100)
item.value=rmdval
chartData.dataMax+=rmdval
}else if(item.value){
delete item.value
}
if(item.children&&item.children.length>0){
const num=time-1
mapLinkAction(item.children,num)
}
})
}
const processData=()=>{
const {colors,data}=state.chartData; const processOption = (datas) => {
let processedData=[], const maxvalue = Math.max(...datas.map(i => i.value))
type="bar",
yAxisIndex=0; let maxArr = new Array(datas.length).fill(maxvalue);
processedData.push({
type: 'sunburst',
data: data, state.chartOption = {
radius: [20, '80%'], update: true,
center:['53%','50%'], tooltip: {
itemStyle: { show: false,
borderRadius: 7, trigger: "axis",
borderWidth: 2, axisPointer: {
borderColor:$c.bll9, type: "shadow",
},
}, },
label: { legend: {
show: true, show: false,
color:fontColor,
fontSize: 12,
rotate: 'tangential'//文字旋转
// formatter: function (param) {
// return param.name+'\n'+param.value
// }
}, },
emphasis: { grid: {
label:{ left: 0,
show: true, right: 30,
fontSize: '16', bottom: 20,
color:$c.wh, containLabel: true,
formatter: function (param) {
return param.name+'\n'+param.value
}
}
}, },
levels: [{},] xAxis: {
}) show: true,
state.chartOption.series=processedData; type: "value",
} axisLine: {
show: true,
const processOption=()=>{ lineStyle: {
const {dataMax,colors}=state.chartData color: ["rgba(62, 113, 157, 0.5)"],
state.chartOption={ },
update:false,
title:{
text:"数据单位:万元 点击数据可下钻",subtext:"", left:40, bottom:0,
textStyle:{ color:subFontColor, fontSize:12, fontWeight:"normal" },
},
visualMap: {
type: 'continuous',
left:0,
bottom:0,
min: 0,
max: dataMax,
inRange: {
color: colors
}, },
textStyle:{ splitLine: {
color:fontColor, lineStyle: {
color: "rgba(62, 113, 157, 0.5)",
},
},
axisLabel: {
color: "rgba(62, 113, 157, 1)",
}, },
}, },
series: [] yAxis: [
} {
processData(); type: "category",
} inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: true,
},
},
data: datas.map((item) => item.label),
axisLabel: {
margin: 0,
fontSize: 12,
color: "#fff",
rich: {
a1: {
color: "#fff",
backgroundColor: colorList[0],
width: 20,
height: 20,
align: "center",
borderRadius: 10,
},
a2: {
color: "#fff",
backgroundColor: colorList[1],
width: 20,
height: 20,
align: "center",
borderRadius: 10,
},
a3: {
color: "#fff",
backgroundColor: colorList[2],
width: 20,
height: 20,
align: "center",
borderRadius: 10,
},
b: {
color: "#fff",
backgroundColor: colorList[3],
width: 20,
height: 20,
align: "center",
borderRadius: 10,
},
},
formatter: function (params) {
var index = datas.map((item) => item.label).indexOf(params);
index = index + 1;
if (index - 1 < 3) {
return ["{a" + index + "|" + index + "}" + " " + params].join(
"\n"
);
} else {
return ["{b|" + index + "}" + " " + params].join("\n");
}
},
},
},
],
series: [
{
z: 2,
name: "value",
type: "bar",
barWidth: 8,
zlevel: 1,
data: datas.map((item, i) => {
let itemStyle = {};
itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(24, 103, 222, 0.4)",
},
{
offset: 1,
color: i < 3 ? colorList[i] : colorList[3],
},
]);
return {
value: item.value,
itemStyle: itemStyle,
};
}),
label: {
show: true,
position: "right",
color: "#fff",
fontSize: 14,
},
itemStyle: {
barBorderRadius: [0, 15, 15, 0],
},
},
{
name: "背景",
type: "bar",
barWidth: 24,
barGap: "-200%",
itemStyle: {
normal: {
color: "rgba(0, 64, 128, 0.19)",
},
},
data: maxArr,
},
],
};
};
onMounted(() => { onMounted(() => {
processOption(); //processOption();
})
http("POST", "/index/statistics/schoolVisit", {}).then((res) => {
let result = res?.data?.dataList?.map?.((it,i)=>{
return {
...it,
label:it?.label?.substring(0,10)
}
});
console.log(result);
processOption(result);
});
});
</script> </script>
<template> <template>
<echartsInit :chartOption="state.chartOption"></echartsInit> <echartsInit :chartOption="state.chartOption"></echartsInit>
</template> </template>
<style lang="less"> <style lang="less"></style>
</style>
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