Tue Jan 2 04:35:00 CST 2024 inscode

src/assets/main.css

@@ -9,8 +9,8 @@ body {
   background-image: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.6),
       rgba(0, 0, 0, 0.8)), url("./img/previewFix.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /* background-repeat: no-repeat; */
   color: #fff;
 }
 .ant-radio-wrapper{

src/components/visual/article/index.vue

+<template>
+    <div id="barChartId" style="width:100vw;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted } from 'vue';
+const props = defineProps({
+    tableData: []
+})
+
+const state = reactive({
+    exportLoading: false,
+    dataSource: [],
+    echartInstance: undefined
+})
+watch(() => props.tableData,
+    (val) => {
+        state.dataSource = val
+        nextTick(() => {
+            renderEchartBar()
+        })
+    }, {
+    deep: true,
+    immediate: true
+})
+function renderEchartBar() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('barChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const option = {
+        title: {
+            text: 'csdn 质量分柱状图 点击跳转到对应的文章',
+                        textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        dataZoom: [
+            {
+                id: 'dataZoomX',
+                type: 'slider',
+                xAxisIndex: [0],
+                filterMode: 'filter'
+            }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {
+            
+        },
+        xAxis: {
+            type: 'category',
+            data: state.dataSource.map(item => item.postTime),
+                       axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            type: 'value',
+                       axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        tooltip: {
+            formatter: function (params) {
+                let findItem = state.dataSource.find(item => {
+                    return item.postTime == params.name
+                })
+                if (!findItem) {
+
+                    return ''
+                }
+                return `<span style='color:blue'>-<span> 博客标题：${findItem.title}  <br>
+                <span style='color:green'>-<span> 博客质量：${params.value} <br>
+                <span style='color:red'>-<span> 博客建议：${findItem.message}<br>
+                <span style='color:blue'>-<span> 博客地址：${findItem.url}<br>
+                <span style='color:blue'>-<span> 发文时间：${params.name}<br>
+               `
+            },
+        },
+        series: [
+            {
+                data: state.dataSource.map(item => item.score),
+                type: 'bar',
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)'
+                },
+                label: { //柱体上显示数值
+                    show: true,//开启显示
+                    position: 'center',//在上方显示
+                    textStyle: {//数值样式
+                        fontSize: '2px',
+                        color: 'blue'
+                    }
+                },
+                markPoint: {
+                    data: [
+                        { type: 'max', name: '最高分' },
+                        { type: 'min', name: '最低分' }
+                    ]
+                },
+                markLine: {
+                    itemStyle: {
+                        normal: {
+                            lineStyle:
+                            {
+                                type: 'dotted',
+                            },
+                            label:
+                            {
+                                show: true,
+                                position: 'middle',
+                                color: 'red',
+                                lineHeight: 35,
+                                backgroundColor: 'rgba(255,255,255.7)',
+                                formatter: (params) => {
+                                    return params.name + ":" + params.value
+                                }
+                            }
+                        }
+                    },
+                    data: [
+                        {
+                            type: 'average',
+                            name: '平均分'
+                        }]
+                }
+            }
+        ]
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    myChart.on('click', function (params) {
+        const findItem = state.dataSource.find(item => {
+            return item.postTime == params.name
+        })
+        if (params.name) {
+            window.open(findItem.url, '_blank')
+        }
+    });
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+</script>
\ No newline at end of file

src/components/visual/hub/data.js

+export const pieData= [
+        { value: 270, name: 'csdn博客' },
+        { value: 131, name: '掘金博客' },
+        { value: 60, name: '阿里云开发者社区' },
+        { value: 30, name: '华为云开发者社区' },
+        { value: 10, name: '腾讯云开发者社区' },
+        { value: 10, name: '51cto博客' },
+      ]
\ No newline at end of file

src/components/visual/hub/index.vue

+<template>
+    <div id="pieChartId" style="width:800px;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
+import {pieData} from './data.js'
+
+const state = reactive({
+    exportLoading: false,
+    echartInstance: undefined,
+    hubData:[],
+})
+
+function renderEchartLine() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('pieChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const seriesItem= {
+      name: 'Access From',
+      type: 'pie',
+      radius: '50%',
+      data:state.hubData,
+      label:{
+        color:'#ffffff'
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+    const seriesData=[seriesItem]
+
+    const option = {
+        title: {
+            text: '社区文章数量占比',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+        },
+        xAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        series: seriesData
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+const getHubConfig= ()=>{
+     state.hubData=[...pieData]
+    renderEchartLine()
+}
+
+onMounted(()=>{
+    getHubConfig()
+})
+</script>
\ No newline at end of file

src/components/visual/index.vue

 <script setup>
-    import {reactive} from 'vue'
+    import {reactive,onMounted} from 'vue'
     import CommitLine from './commit/index.vue'
+    import ArticleBar from './article/index.vue'
+    import HubPie from './hub/index.vue'
+    import {articleData} from './data/data.js'
     const state=reactive({
-        title:''
+        title:'',
+        articleData:[]
+    })
+
+    const getRenderBarData= ()=>{
+        state.articleData=[...articleData]
+        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
+    }
+    onMounted(()=>{
+        getRenderBarData()
     })
 </script>
 <template>
-    <div>
+    <div style="padding:20px;">
         <div>
             {{state.title}}
             <div>
                 <CommitLine />
+                <ArticleBar :tableData="state.articleData" />
+                <HubPie />
             </div>
         </div>
     </div>