jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 引入echarts替换antvG2plot

Browse Source
This commit is contained in:
Soybean
2022-05-07 00:58:24 +08:00
parent 14c145eef1
commit e7ad08685e
9 changed files with 384 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/dashboard/analysis/components/TopChart/data.json
View File

@ -1,152 +0,0 @@
[
{
"date": "2021/10/1",
"type": "下载量",
"value": 4623
},
{
"date": "2021/10/1",
"type": "注册数",
"value": 2208
},
{
"date": "2021/10/2",
"type": "下载量",
"value": 6145
},
{
"date": "2021/10/2",
"type": "注册数",
"value": 2016
},
{
"date": "2021/10/3",
"type": "下载量",
"value": 508
},
{
"date": "2021/10/3",
"type": "注册数",
"value": 2916
},
{
"date": "2021/10/4",
"type": "下载量",
"value": 6268
},
{
"date": "2021/10/4",
"type": "注册数",
"value": 4512
},
{
"date": "2021/10/5",
"type": "下载量",
"value": 6411
},
{
"date": "2021/10/5",
"type": "注册数",
"value": 8281
},
{
"date": "2021/10/6",
"type": "下载量",
"value": 1890
},
{
"date": "2021/10/6",
"type": "注册数",
"value": 2008
},
{
"date": "2021/10/7",
"type": "下载量",
"value": 4251
},
{
"date": "2021/10/7",
"type": "注册数",
"value": 1963
},
{
"date": "2021/10/8",
"type": "下载量",
"value": 2978
},
{
"date": "2021/10/8",
"type": "注册数",
"value": 2367
},
{
"date": "2021/10/9",
"type": "下载量",
"value": 3880
},
{
"date": "2021/10/9",
"type": "注册数",
"value": 2956
},
{
"date": "2021/10/10",
"type": "下载量",
"value": 3606
},
{
"date": "2021/10/10",
"type": "注册数",
"value": 678
},
{
"date": "2021/10/11",
"type": "下载量",
"value": 4311
},
{
"date": "2021/10/11",
"type": "注册数",
"value": 3188
},
{
"date": "2021/10/12",
"type": "下载量",
"value": 4116
},
{
"date": "2021/10/12",
"type": "注册数",
"value": 3491
},
{
"date": "2021/10/13",
"type": "下载量",
"value": 6419
},
{
"date": "2021/10/13",
"type": "注册数",
"value": 2852
},
{
"date": "2021/10/14",
"type": "下载量",
"value": 1643
},
{
"date": "2021/10/14",
"type": "注册数",
"value": 4788
},
{
"date": "2021/10/15",
"type": "下载量",
"value": 445
},
{
"date": "2021/10/15",
"type": "注册数",
"value": 4319
}
]

236
src/views/dashboard/analysis/components/TopChart/index.vue
View File

@ -31,99 +31,159 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Line, Pie } from '@antv/g2plot';
import data from './data.json';
import { ref, computed } from 'vue';
import { useThemeStore } from '@/store';
import { useEcharts, type ECOption } from '@/hooks';
const lineRef = ref<HTMLElement>();
const line = ref<Line>();
const pieRef = ref<HTMLElement>();
const pie = ref<Pie>();
const theme = useThemeStore();
function renderLineChart() {
if (!lineRef.value) return;
line.value = new Line(lineRef.value, {
data,
autoFit: true,
xField: 'date',
yField: 'value',
seriesField: 'type',
lineStyle: {
lineWidth: 4
},
area: {
style: {
fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
}
},
smooth: true,
animation: {
appear: {
animation: 'wave-in',
duration: 2000
}
}
});
line.value.render();
}
function renderPieChart() {
if (!pieRef.value) return;
const pieData = [
{ type: '学习', value: 20 },
{ type: '娱乐', value: 10 },
{ type: '工作', value: 30 },
{ type: '休息', value: 40 }
];
pie.value = new Pie(pieRef.value, {
appendPadding: 10,
data: pieData,
angleField: 'value',
colorField: 'type',
radius: 0.8,
innerRadius: 0.65,
meta: {
value: {
formatter: v => `${v}%`
}
},
label: {
type: 'inner',
autoRotate: false,
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
},
statistic: undefined,
pieStyle: {
radius: [20]
},
color: ['#025DF4', '#DB6BCF', '#2498D1', '#FF745A', '#007E99', '#FFA8A8', '#2391FF'],
legend: {
position: 'bottom'
},
interactions: [
{ type: 'element-selected' },
{ type: 'element-active' },
{
type: 'pie-statistic-active',
cfg: {
start: [
{ trigger: 'element:mouseenter', action: 'pie-statistic:change' },
{ trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' }
],
end: [
{ trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
{ trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' }
]
const darkMode = computed(() => theme.darkMode);
const { domRef: lineRef } = useEcharts(
ref<ECOption>({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['下载量', '注册数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
color: '#8e9dff',
name: '下载量',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#8e9dff'
},
{
offset: 1,
color: '#fff'
}
]
}
},
emphasis: {
focus: 'series'
},
data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
},
{
color: '#26deca',
name: '注册数',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#26deca'
},
{
offset: 1,
color: '#fff'
}
]
}
},
emphasis: {
focus: 'series'
},
data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
}
]
});
}),
darkMode
);
pie.value.render();
}
onMounted(() => {
renderLineChart();
renderPieChart();
});
const { domRef: pieRef } = useEcharts(
ref<ECOption>({
tooltip: {
trigger: 'item'
},
legend: {
bottom: '1%',
left: 'center',
itemStyle: {
borderWidth: 0
}
},
series: [
{
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
name: '时间安排',
type: 'pie',
radius: ['45%', '75%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '12'
}
},
labelLine: {
show: false
},
data: [
{ value: 20, name: '学习' },
{ value: 10, name: '娱乐' },
{ value: 30, name: '工作' },
{ value: 40, name: '休息' }
]
}
]
}),
darkMode
);
</script>
<style></style>