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 @@
* @Author: wuhao930406 1148547900@qq.com
* @Date: 2023-08-16 11:24:18
* @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
* @Description:
*
......@@ -77,19 +77,19 @@ const state = reactive({
portlets: [
{
id: "r1",
title: "销售情况",
title: "注册用户年度分布(人)",
component: "echartBar",
border: "blank",
},
{
id: "r2",
title: "任务完成情况",
title: "年度访问量(次)",
component: "echartGaugeTriple",
border: "blank",
},
{
id: "r3",
title: "开支占比",
title: "学校使用排名",
component: "echartSunburst",
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>
const state=reactive({
chartData:{
legend:['本地视频会议', '异地视频会议'],
xAxis:['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
colors:[$c.bll4,$c.aql4,$c.ipl3,$c.cbl3,],
data:[
[235, 210, 187, 212, 278, 220, 320, 302],
[68, 121, 34, 56, 23, 120, 132, 101, 134]
],
import { http } from "@/api/request";
const state = reactive({
chartData: {
legend: ['注册用户年度分布'],
colors: [$c.bll4, $c.aql4, $c.ipl3, $c.cbl3,],
},
chartOption:{}
chartOption: {}
})
const processData=()=>{
let legend=state.chartData.legend,
colors=state.chartData.colors,
xAxis=state.chartData.xAxis,
data=state.chartData.data,
processedData=[]
legend.forEach((item,i)=>{
const processData = (dataList) => {
let legend = state.chartData.legend,
colors = state.chartData.colors,
processedData = []
legend.forEach((item, i) => {
processedData.push({
name: legend[i],
type: 'bar',
// barWidth:10,
barWidth: 10,
label: {
show: false,
position: 'insideRight'
},
itemStyle:{
itemStyle: {
color: colors[i],
borderRadius: 5
},
data: data[i]
data: dataList?.map((item) => {
return item.value;
})
})
})
state.chartOption.series=processedData;
state.chartOption.xAxis.data=xAxis;
state.chartOption.legend.data=legend;
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=()=>{
state.chartOption={
update:false,
const processOption = (dataList) => {
console.log(0);
state.chartOption = {
update: true,
// title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
tooltip: {
trigger: 'axis',
......@@ -50,10 +62,10 @@ const processOption=()=>{
}
},
legend: {
show:true,
show: true,
data: [],
top:0,
right:10,
top: 0,
right: 10,
},
// toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
grid: {
......@@ -66,24 +78,27 @@ const processOption=()=>{
yAxis: {
type: 'value',
splitNumber: 3,
axisLabel: { align: 'right' }
axisLabel: { align: 'right' },
},
xAxis: {
type: 'category',
data: [],
axisLabel: { align: 'center' }
axisLabel: { align: 'center' },
},
series: []
}
processData()
processData(dataList)
}
onMounted(() => {
processOption();
//processOption();
http("POST", "/index/statistics/register", {}).then((res) => {
processOption(res?.data?.dataList);
})
})
</script>
<template>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
<style lang="less"></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>
const state=reactive({
chartData:{
title:"任务完成情况",
legend:['开发任务1','采购任务2','销售任务3'],
import { http } from "@/api/request";
const state = reactive({
chartData: {
legend: ['年度访问量'],
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=()=>{
const {legend,colors,colorsD,data,radius,position}=state.chartData;
let processedData=[],
type="bar",
yAxisIndex=0;
legend.forEach((item,i)=>{
const processData = (dataList) => {
let legend = state.chartData.legend,
colors = state.chartData.colors,
processedData = []
legend.forEach((item, i) => {
processedData.push({
type: 'gauge',
startAngle: 90,
endAngle: -270,
center: position[i],
radius: radius[i],
pointer: { show: false },
title: { fontSize: 14 },
name: legend[i],
type: 'line',
label: {
show: false,
position: 'insideRight'
},
itemStyle: {
color: colors[i],
shadowColor: colors[i],
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {}
borderRadius: 5
},
detail: {
width: 50,
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%'] }
}
],
data: dataList?.map((item) => {
return item.value;
})
})
})
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=()=>{
state.chartOption={
update:false,
const processOption = (dataList) => {
state.chartOption = {
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: []
}
processData()
processData(dataList)
}
onMounted(() => {
processOption();
//processOption();
http("POST", "/index/statistics/yearVisit", {}).then((res) => {
processOption(res?.data?.dataList);
})
})
</script>
<template>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
<style lang="less"></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>
const { proxy } = getCtx();
const state=reactive({
fontColor:$c.wh,
subFontColor:$c.cbl3,
chartData:{
title:"业务利润占比",
colors:[$c.aql7, $c.cyl5],
data:[
{
name: '软件',
children: [
{
name: '产品',value:123,
children: [
{ name: 'GIS系统', value: 49 },
{ name: '可视化', value: 25},
{ 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:[]
})
import { http } from "@/api/request";
var colorList = [
"rgba(211, 68, 53, 1)",
"rgba(228, 133, 48, 1)",
"rgba(231, 185, 44, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
"rgba(23, 165, 213, 1)",
const {dataOri,fontColor,subFontColor}=toRefs(state)
];
const mapLinkAction=(data,time)=>{
const {chartData}=state
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 state = reactive({
chartOption: {},
});
const processData=()=>{
const {colors,data}=state.chartData;
let processedData=[],
type="bar",
yAxisIndex=0;
processedData.push({
type: 'sunburst',
data: data,
radius: [20, '80%'],
center:['53%','50%'],
itemStyle: {
borderRadius: 7,
borderWidth: 2,
borderColor:$c.bll9,
const processOption = (datas) => {
const maxvalue = Math.max(...datas.map(i => i.value))
let maxArr = new Array(datas.length).fill(maxvalue);
state.chartOption = {
update: true,
tooltip: {
show: false,
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
label: {
show: true,
color:fontColor,
fontSize: 12,
rotate: 'tangential'//文字旋转
// formatter: function (param) {
// return param.name+'\n'+param.value
// }
legend: {
show: false,
},
emphasis: {
label:{
show: true,
fontSize: '16',
color:$c.wh,
formatter: function (param) {
return param.name+'\n'+param.value
}
}
grid: {
left: 0,
right: 30,
bottom: 20,
containLabel: true,
},
levels: [{},]
})
state.chartOption.series=processedData;
}
const processOption=()=>{
const {dataMax,colors}=state.chartData
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
xAxis: {
show: true,
type: "value",
axisLine: {
show: true,
lineStyle: {
color: ["rgba(62, 113, 157, 0.5)"],
},
},
textStyle:{
color:fontColor,
splitLine: {
lineStyle: {
color: "rgba(62, 113, 157, 0.5)",
},
},
axisLabel: {
color: "rgba(62, 113, 157, 1)",
},
},
series: []
}
processData();
}
yAxis: [
{
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(() => {
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>
<template>
<echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less">
</style>
<style lang="less"></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