Auto Commit

public/htmlContent.html

+<article class="baidu_pl">
+    <div id="article_content" class="article_content clearfix">
+    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
+    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css">
+            <div id="content_views" class="markdown_views prism-atelier-sulphurpool-light">
+                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
+                </svg>
+                <p></p> 
+<div class="toc"> 
+<h4><a name="t0"></a>文章目录</h4> 
+<ul><li><ul><li><a href="#_2" rel="nofollow" target="_self">⭐前言</a></li><li><a href="#2023csdn_10" rel="nofollow" target="_self">⭐2023我在csdn的旅途痕迹</a></li><li><ul><li><a href="#x1F496node_12" rel="nofollow" target="_self">💖node系列文章</a></li><li><a href="#x1F496vue3_33" rel="nofollow" target="_self">💖vue3系列文章</a></li><li><a href="#x1F496python_41" rel="nofollow" target="_self">💖python系列文章</a></li><li><a href="#x1F496react_51" rel="nofollow" target="_self">💖react系列文章</a></li><li><a href="#x1F496js_55" rel="nofollow" target="_self">💖js拖拽相关文章</a></li><li><a href="#x1F496_59" rel="nofollow" target="_self">💖小程序系列文章</a></li><li><a href="#x1F496uniapp_70" rel="nofollow" target="_self">💖uniapp系列文章</a></li><li><a href="#x1F496csdn_73" rel="nofollow" target="_self">💖在csdn的收获</a></li></ul> 
+</li><li><a href="#_77" rel="nofollow" target="_self">⭐可视化布局</a></li><li><ul><li><a href="#x1F496_git__83" rel="nofollow" target="_self">💖 git 数据的提取</a></li></ul> 
+</li><li><a href="#echarts_92" rel="nofollow" target="_self">⭐echarts页面</a></li><li><ul><li><a href="#x1F496_vue3____95" rel="nofollow" target="_self">💖 vue3 封装 折线图分布 组件</a></li><li><a href="#x1F496_vue3____202" rel="nofollow" target="_self">💖 vue3 封装 柱状图分布 组件</a></li><li><a href="#x1F496_vue3____374" rel="nofollow" target="_self">💖 vue3 封装 饼图分布 组件</a></li><li><a href="#x1F496inscode_486" rel="nofollow" target="_self">💖inscode代码块</a></li></ul> 
+</li><li><a href="#_489" rel="nofollow" target="_self">⭐总结</a></li><li><ul><li><a href="#x1F496_2024__529" rel="nofollow" target="_self">💖 2024 展望</a></li></ul> 
+</li><li><a href="#_537" rel="nofollow" target="_self">⭐结束</a></li></ul> 
+</li></ul> 
+</div> 
+<br> 
+<img src="https://img-blog.csdnimg.cn/76d5545a9f1f4cd49636b82eca2f5582.gif#pic_center" alt="yma16-logo"> 
+<p></p> 
+<h3><a name="t1"></a><a id="_2"></a>⭐前言</h3> 
+<p>大家好，我是yma16，本文分享关于 vue3+echarts可视化——记录我的2023编程之旅。<br> <strong>数据来源</strong></p> 
+<ol><li>回顾2023，我在gitcode、gitee、github上的提交记录数据</li><li>回顾2023，我在csdn发布的文章数量</li><li>回顾2023，我在csdn的粉丝量</li><li>回顾2023，我的博客社区数量</li></ol> 
+<h3><a name="t2"></a><a id="2023csdn_10"></a>⭐2023我在csdn的旅途痕迹</h3> 
+<p>以下是我在csdn留下的痕迹</p> 
+<h4><a name="t3"></a><a id="x1F496node_12"></a>💖node系列文章</h4> 
+<p><a href="https://blog.csdn.net/qq_38870145/article/details/108611336">node_windows环境变量配置</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/120364769">node_npm发布包</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/126220134">linux_配置node</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130445328">node_nvm安装配置</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130450397">node笔记_http服务搭建（渲染html、json）</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130545110">node笔记_读文件</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130545899">node笔记_写文件</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130611818?spm=1001.2014.3001.5501">node笔记_连接mysql实现crud</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130672968">node笔记_formidable实现前后端联调的文件上传</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130715454?spm=1001.2014.3001.5502">node笔记_koa框架介绍</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130737052?spm=1001.2014.3001.5501">node_koa路由</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131030287?spm=1001.2014.3001.5501">node_生成目录</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131255680?spm=1001.2014.3001.5501">node_读写excel</a><br> <a href="https://yma16.blog.csdn.net/article/details/131316417" rel="nofollow">node笔记_读取目录的文件</a><br> <a href="https://yma16.blog.csdn.net/article/details/132136139" rel="nofollow">node笔记——调用免费qq的smtp发送html格式邮箱</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/134046367?spm=1001.2014.3001.5501">node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/134090053">node实战——后端koa结合jwt连接mysql实现权限登录（node后端就业储备知识）</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/134277390?spm=1001.2014.3001.5501">node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）</a><br> <a href="https://yma16.blog.csdn.net/article/details/135174869" rel="nofollow">node实战——koa实现文件下载和图片/pdf/视频预览（node后端储备知识）</a></p> 
+<h4><a name="t4"></a><a id="x1F496vue3_33"></a>💖vue3系列文章</h4> 
+<p><a href="https://blog.csdn.net/qq_38870145/article/details/133955447">vue3 + fastapi 实现选择目录所有文件自定义上传到服务器</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/132520250">前端vue2、vue3去掉url路由“ # ”号——nginx配置</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131778530">csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/129460437">认识vite_vue3 初始化项目到打包</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131756726">python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/134022655?spm=1001.2014.3001.5501">让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容</a><br> <a href="https://blog.csdn.net/qq_38870145?spm=1010.2135.3001.5343">前端vue3——html2canvas给网站截图生成宣传海报</a></p> 
+<h4><a name="t5"></a><a id="x1F496python_41"></a>💖python系列文章</h4> 
+<p><a href="https://yma16.blog.csdn.net/article/details/131347244" rel="nofollow">python爬虫_基本数据类型</a><br> <a href="https://yma16.blog.csdn.net/article/details/131350469" rel="nofollow">python爬虫_函数的使用</a><br> <a href="https://yma16.blog.csdn.net/article/details/131407234?spm=1001.2014.3001.5502" rel="nofollow">python爬虫_requests的使用</a><br> <a href="https://yma16.blog.csdn.net/article/details/131407234?spm=1001.2014.3001.5502" rel="nofollow">python爬虫_selenuim可视化质量分</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131467905?spm=1001.2014.3001.5501">python爬虫_django+vue3可视化csdn用户质量分</a><br> <a href="https://yma16.blog.csdn.net/article/details/131544250?spm=1001.2014.3001.5502" rel="nofollow">python爬虫_正则表达式获取天气预报并用echarts折线图显示</a><br> <a href="https://yma16.blog.csdn.net/article/details/131586067?spm=1001.2014.3001.5502" rel="nofollow">python爬虫_requests获取bilibili锻刀村系列的字幕并用分词划分可视化词云图展示</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/131649561?">python爬虫_selenuim登录个人markdown博客站点</a><br> <a href="https://yma16.blog.csdn.net/article/details/131690031?spm=1001.2014.3001.5502" rel="nofollow">python爬虫_requests获取小黄人表情保存到文件夹</a></p> 
+<h4><a name="t6"></a><a id="x1F496react_51"></a>💖react系列文章</h4> 
+<p><a href="https://blog.csdn.net/qq_38870145/article/details/130467441">next.js博客搭建_初始化next项目（第一步）</a><br> <a href="https://yma16.blog.csdn.net/article/details/130936156" rel="nofollow">next.js博客搭建_登录注册（第二步）</a><br> <a href="https://yma16.blog.csdn.net/article/details/131335154" rel="nofollow">next.js博客搭建_react-markdown渲染内容（第三步）</a></p> 
+<h4><a name="t7"></a><a id="x1F496js_55"></a>💖js拖拽相关文章</h4> 
+<p><a href="https://blog.csdn.net/qq_38870145/article/details/134794991">前端——html拖拽原理</a><br> <a href="https://yma16.blog.csdn.net/article/details/134895099?spm=1001.2014.3001.5502" rel="nofollow">前端vue3——实现二次元人物拼图校验</a></p> 
+<h4><a name="t8"></a><a id="x1F496_59"></a>💖小程序系列文章</h4> 
+<p><a href="https://blog.csdn.net/qq_38870145/article/details/129845226?spm=1001.2014.3001.5502">小程序组件传值</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/129108857?spm=1001.2014.3001.5501">小程序自定义微信昵称和头像</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/127293290?spm=1001.2014.3001.5501">小程序制作markdown博客</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/128990718?spm=1001.2014.3001.5501">小程序结合chatgpt制作聊天页面</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/129891852?spm=1001.2014.3001.5501">小程序复制到粘贴板的功能实现</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130029118">小程序的markdown代码块复制功能</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130041654?spm=1001.2014.3001.5501">小程序图片二维码识别</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130161570?spm=1001.2014.3001.5501">小程序获取openid联动django实现</a><br> <a href="https://blog.csdn.net/qq_38870145/article/details/130188931">微信小程序_搜索图片功能实现</a></p> 
+<h4><a name="t9"></a><a id="x1F496uniapp_70"></a>💖uniapp系列文章</h4> 
+<p><a href="https://yma16.blog.csdn.net/article/details/134906708?spm=1001.2014.3001.5502" rel="nofollow">uniapp框架——初始化vue3项目(搭建ai项目第一步)</a><br> <a href="https://yma16.blog.csdn.net/article/details/135174869" rel="nofollow">uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)</a></p> 
+<h4><a name="t10"></a><a id="x1F496csdn_73"></a>💖在csdn的收获</h4> 
+<p>举办vue3+ts的赛道、博客专家认证和认证前端领域创作者。<br> <img src="https://img-blog.csdnimg.cn/direct/6982e8f5fb8946118f83ac2c7ca61b58.png" alt="csdn-2023"></p> 
+<h3><a name="t11"></a><a id="_77"></a>⭐可视化布局</h3> 
+<p>关于图表展示的选择</p> 
+<ol><li>git代码分布，采用折线图，以时间为维度</li><li>csdn 发布的文章数量采用 柱状图</li><li>我在csdn的粉丝数量采用折线图进行分布</li><li>社区数量采用饼图进行展示</li></ol> 
+<h4><a name="t12"></a><a id="x1F496_git__83"></a>💖 git 数据的提取</h4> 
+<p>gitcode平台提交次数获取 <a href="https://gitcode.net/users/qq_38870145/calendar.json" rel="nofollow">https://gitcode.net/users/qq_38870145/calendar.json</a><br> gitcode平台的代码提交<br> <img src="https://img-blog.csdnimg.cn/direct/2a1634e4ead24db585a39d9e23d7d6c6.png" alt="gitcode-data"><br> gitee平台 commit数据获取</p> 
+<p><a href="https://gitee.com/yma16/contribution_timeline?url=/yma16/contribution_timeline&amp;scope=my&amp;day=&amp;start_date=&amp;end_date=&amp;year=&amp;limit=20&amp;prev_id=747337371&amp;_=1704133949757" rel="nofollow">https://gitee.com/yma16/contribution_timeline?url=%2Fyma16%2Fcontribution_timeline&amp;scope=my&amp;day=&amp;start_date=&amp;end_date=&amp;year=&amp;limit=20&amp;prev_id=747337371&amp;_=1704133949757</a><br> gitee平台代码提交<br> <img src="https://img-blog.csdnimg.cn/direct/46f30caec0514c1f9bfe6768f5e005ba.png" alt="gitee"></p> 
+<h3><a name="t13"></a><a id="echarts_92"></a>⭐echarts页面</h3> 
+<p>采用上下排版布局样式</p> 
+<h4><a name="t14"></a><a id="x1F496_vue3____95"></a>💖 vue3 封装 折线图分布 组件</h4> 
+<pre data-index="0" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"lineChartId"</span> style<span class="token operator">=</span><span class="token string">"width:100vw;height:300px;margin: 0 auto"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> defineProps<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> onUnmounted<span class="token punctuation">,</span>onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>getCommitData<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./data.js'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
+<span class="token literal-property property">exportLoading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+<span class="token literal-property property">echartInstance</span><span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
+<span class="token literal-property property">commitConfig</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token literal-property property">lineData</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">function</span> <span class="token function">renderEchartLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+<span class="token comment">// 基于准备好的dom，初始化echarts实例</span>
+<span class="token keyword">const</span> domInstance<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'lineChartId'</span><span class="token punctuation">)</span>
+<span class="token keyword">if</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
+    domInstance<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'_echarts_instance_'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
+    <span class="token keyword">return</span> 
+<span class="token punctuation">}</span>
+<span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> seriesItem<span class="token operator">=</span>    <span class="token punctuation">{<!-- --></span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span> state<span class="token punctuation">.</span>commitConfig<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=&gt;</span>item<span class="token punctuation">.</span>count<span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">smooth</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">const</span> labelData<span class="token operator">=</span>state<span class="token punctuation">.</span>commitConfig<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=&gt;</span>item<span class="token punctuation">.</span>date<span class="token punctuation">)</span>
+<span class="token keyword">const</span> seriesData<span class="token operator">=</span><span class="token punctuation">[</span>seriesItem<span class="token punctuation">]</span>
+
+<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'git code git commit次数'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">textStyle</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">toolbox</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">saveAsImage</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'dataZoomX'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">filterMode</span><span class="token operator">:</span> <span class="token string">'filter'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">axisPointer</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'shadow'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">data</span><span class="token operator">:</span> labelData<span class="token punctuation">,</span>
+        <span class="token literal-property property">axisLabel</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">axisLabel</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">x2</span><span class="token operator">:</span> <span class="token number">100</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">series</span><span class="token operator">:</span> seriesData
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token comment">// 使用刚指定的配置项和数据显示图表。</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 监听</span>
+state<span class="token punctuation">.</span>echartInstance <span class="token operator">=</span> myChart<span class="token punctuation">;</span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> myChart<span class="token punctuation">.</span>resize<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> <span class="token keyword">null</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> <span class="token function-variable function">getCommitConfig</span><span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
+ state<span class="token punctuation">.</span>commitConfig<span class="token operator">=</span><span class="token function">getCommitData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token function">renderEchartLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
+<span class="token function">getCommitConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+<div class="hljs-button {2}" data-title="复制"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7365&quot;}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li></ul></pre> 
+<p>折线图效果如下<br> <img src="https://img-blog.csdnimg.cn/direct/7dcd06fc3e7e4a7fad023e655be9d302.png" alt="line-chart"></p> 
+<h4><a name="t15"></a><a id="x1F496_vue3____202"></a>💖 vue3 封装 柱状图分布 组件</h4> 
+<p>2023 文章质量分 分布 数据<br> 参考我的博客：<br> <a href="https://blog.csdn.net/qq_38870145/article/details/131467905?spm=1001.2014.3001.5501">python爬虫_django+vue3可视化csdn用户质量分</a><br> 以下是 过滤的2023 yma16 文章的 所有json数据<br> <img src="https://img-blog.csdnimg.cn/direct/41bf66c5f2614410bce543ac5c7b8cba.png" alt="article"><br> 代码实现：</p> 
+<pre data-index="1" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"barChartId"</span> style<span class="token operator">=</span><span class="token string">"width:100vw;height:900px;margin: 0 auto"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> defineProps<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> onUnmounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
+<span class="token literal-property property">tableData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
+<span class="token literal-property property">exportLoading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+<span class="token literal-property property">dataSource</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token literal-property property">echartInstance</span><span class="token operator">:</span> <span class="token keyword">undefined</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>tableData<span class="token punctuation">,</span>
+<span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+    state<span class="token punctuation">.</span>dataSource <span class="token operator">=</span> val
+    <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token function">renderEchartBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
+<span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+<span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">function</span> <span class="token function">renderEchartBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+<span class="token comment">// 基于准备好的dom，初始化echarts实例</span>
+<span class="token keyword">const</span> domInstance<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'barChartId'</span><span class="token punctuation">)</span>
+<span class="token keyword">if</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
+    domInstance<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'_echarts_instance_'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
+    <span class="token keyword">return</span> 
+<span class="token punctuation">}</span>
+<span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'csdn 质量分柱状图 点击跳转到对应的文章'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">toolbox</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">saveAsImage</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">dataZoom</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'dataZoomX'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'slider'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">filterMode</span><span class="token operator">:</span> <span class="token string">'filter'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">axisPointer</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'shadow'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">data</span><span class="token operator">:</span> state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>postTime<span class="token punctuation">)</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">x2</span><span class="token operator">:</span> <span class="token number">100</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token keyword">let</span> findItem <span class="token operator">=</span> state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+                <span class="token keyword">return</span> item<span class="token punctuation">.</span>postTime <span class="token operator">==</span> params<span class="token punctuation">.</span>name
+            <span class="token punctuation">}</span><span class="token punctuation">)</span>
+            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>findItem<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+
+                <span class="token keyword">return</span> <span class="token string">''</span>
+            <span class="token punctuation">}</span>
+            <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;span style='color:blue'&gt;-&lt;span&gt; 博客标题：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>findItem<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">  &lt;br&gt;
+            &lt;span style='color:green'&gt;-&lt;span&gt; 博客质量：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>params<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> &lt;br&gt;
+            &lt;span style='color:red'&gt;-&lt;span&gt; 博客建议：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>findItem<span class="token punctuation">.</span>message<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;br&gt;
+            &lt;span style='color:blue'&gt;-&lt;span&gt; 博客地址：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>findItem<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;br&gt;
+            &lt;span style='color:blue'&gt;-&lt;span&gt; 发文时间：</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>params<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;br&gt;
+           </span><span class="token template-punctuation string">`</span></span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+        <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">data</span><span class="token operator">:</span> state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>score<span class="token punctuation">)</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">showBackground</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">backgroundStyle</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+                <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgba(180, 180, 180, 0.2)'</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//柱体上显示数值</span>
+                <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//开启显示</span>
+                <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span><span class="token comment">//在上方显示</span>
+                <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token comment">//数值样式</span>
+                    <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'2px'</span><span class="token punctuation">,</span>
+                    <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span>
+                <span class="token punctuation">}</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">markPoint</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+                    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最高分'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'最低分'</span> <span class="token punctuation">}</span>
+                <span class="token punctuation">]</span>
+            <span class="token punctuation">}</span><span class="token punctuation">,</span>
+            <span class="token literal-property property">markLine</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+                <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+                    <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+                        <span class="token literal-property property">lineStyle</span><span class="token operator">:</span>
+                        <span class="token punctuation">{<!-- --></span>
+                            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'dotted'</span><span class="token punctuation">,</span>
+                        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                        <span class="token literal-property property">label</span><span class="token operator">:</span>
+                        <span class="token punctuation">{<!-- --></span>
+                            <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+                            <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
+                            <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
+                            <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">35</span><span class="token punctuation">,</span>
+                            <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'rgba(255,255,255.7)'</span><span class="token punctuation">,</span>
+                            <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+                                <span class="token keyword">return</span> params<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>value
+                            <span class="token punctuation">}</span>
+                        <span class="token punctuation">}</span>
+                    <span class="token punctuation">}</span>
+                <span class="token punctuation">}</span><span class="token punctuation">,</span>
+                <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+                    <span class="token punctuation">{<!-- --></span>
+                        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span>
+                        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'平均分'</span>
+                    <span class="token punctuation">}</span><span class="token punctuation">]</span>
+            <span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token comment">// 使用刚指定的配置项和数据显示图表。</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 监听</span>
+state<span class="token punctuation">.</span>echartInstance <span class="token operator">=</span> myChart<span class="token punctuation">;</span>
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+    <span class="token keyword">const</span> findItem <span class="token operator">=</span> state<span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token keyword">return</span> item<span class="token punctuation">.</span>postTime <span class="token operator">==</span> params<span class="token punctuation">.</span>name
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+        window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>findItem<span class="token punctuation">.</span>url<span class="token punctuation">,</span> <span class="token string">'_blank'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> myChart<span class="token punctuation">.</span>resize<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> <span class="token keyword">null</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+<div class="hljs-button {2}" data-title="复制"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7365&quot;}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li><li style="color: rgb(153, 153, 153);">114</li><li style="color: rgb(153, 153, 153);">115</li><li style="color: rgb(153, 153, 153);">116</li><li style="color: rgb(153, 153, 153);">117</li><li style="color: rgb(153, 153, 153);">118</li><li style="color: rgb(153, 153, 153);">119</li><li style="color: rgb(153, 153, 153);">120</li><li style="color: rgb(153, 153, 153);">121</li><li style="color: rgb(153, 153, 153);">122</li><li style="color: rgb(153, 153, 153);">123</li><li style="color: rgb(153, 153, 153);">124</li><li style="color: rgb(153, 153, 153);">125</li><li style="color: rgb(153, 153, 153);">126</li><li style="color: rgb(153, 153, 153);">127</li><li style="color: rgb(153, 153, 153);">128</li><li style="color: rgb(153, 153, 153);">129</li><li style="color: rgb(153, 153, 153);">130</li><li style="color: rgb(153, 153, 153);">131</li><li style="color: rgb(153, 153, 153);">132</li><li style="color: rgb(153, 153, 153);">133</li><li style="color: rgb(153, 153, 153);">134</li><li style="color: rgb(153, 153, 153);">135</li><li style="color: rgb(153, 153, 153);">136</li><li style="color: rgb(153, 153, 153);">137</li><li style="color: rgb(153, 153, 153);">138</li><li style="color: rgb(153, 153, 153);">139</li><li style="color: rgb(153, 153, 153);">140</li><li style="color: rgb(153, 153, 153);">141</li><li style="color: rgb(153, 153, 153);">142</li><li style="color: rgb(153, 153, 153);">143</li><li style="color: rgb(153, 153, 153);">144</li><li style="color: rgb(153, 153, 153);">145</li><li style="color: rgb(153, 153, 153);">146</li><li style="color: rgb(153, 153, 153);">147</li><li style="color: rgb(153, 153, 153);">148</li><li style="color: rgb(153, 153, 153);">149</li><li style="color: rgb(153, 153, 153);">150</li><li style="color: rgb(153, 153, 153);">151</li><li style="color: rgb(153, 153, 153);">152</li><li style="color: rgb(153, 153, 153);">153</li><li style="color: rgb(153, 153, 153);">154</li><li style="color: rgb(153, 153, 153);">155</li><li style="color: rgb(153, 153, 153);">156</li><li style="color: rgb(153, 153, 153);">157</li><li style="color: rgb(153, 153, 153);">158</li><li style="color: rgb(153, 153, 153);">159</li><li style="color: rgb(153, 153, 153);">160</li></ul></pre> 
+<p>csdn 质量分柱状图效果<br> <img src="https://img-blog.csdnimg.cn/direct/55e4ca3cb96844aa8da44222047c27d4.png" alt="bar-data"></p> 
+<h4><a name="t16"></a><a id="x1F496_vue3____374"></a>💖 vue3 封装 饼图分布 组件</h4> 
+<p>yma16社区文章数量：</p> 
+<pre data-index="2" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token keyword">export</span> <span class="token keyword">const</span> pieData<span class="token operator">=</span> <span class="token punctuation">[</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">270</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'csdn博客'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">131</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'掘金博客'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'阿里云开发者社区'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'华为云开发者社区'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'腾讯云开发者社区'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'51cto博客'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span>
+<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> 
+<p>饼图分布代码实现</p> 
+<pre data-index="3" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"pieChartId"</span> style<span class="token operator">=</span><span class="token string">"width:800px;height:300px;margin: 0 auto"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
+<span class="token operator">&lt;</span>script setup<span class="token operator">&gt;</span>
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span> defineProps<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> watch<span class="token punctuation">,</span> nextTick<span class="token punctuation">,</span> onUnmounted<span class="token punctuation">,</span>onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>pieData<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./data.js'</span>
+
+<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
+<span class="token literal-property property">exportLoading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+<span class="token literal-property property">echartInstance</span><span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
+<span class="token literal-property property">hubData</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+
+<span class="token keyword">function</span> <span class="token function">renderEchartLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
+<span class="token comment">// 基于准备好的dom，初始化echarts实例</span>
+<span class="token keyword">const</span> domInstance<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'pieChartId'</span><span class="token punctuation">)</span>
+<span class="token keyword">if</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
+    domInstance<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'_echarts_instance_'</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
+    <span class="token keyword">return</span> 
+<span class="token punctuation">}</span>
+<span class="token keyword">const</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>domInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> seriesItem<span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
+  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Access From'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token string">'50%'</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">data</span><span class="token operator">:</span>state<span class="token punctuation">.</span>hubData<span class="token punctuation">,</span>
+  <span class="token literal-property property">label</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+    <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+    <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+      <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+      <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.5)'</span>
+    <span class="token punctuation">}</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">const</span> seriesData<span class="token operator">=</span><span class="token punctuation">[</span>seriesItem<span class="token punctuation">]</span>
+
+<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
+    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'社区文章数量占比'</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">textStyle</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">toolbox</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">feature</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">saveAsImage</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">axisLabel</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">axisLabel</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
+            <span class="token literal-property property">color</span><span class="token operator">:</span><span class="token string">'#ffffff'</span>
+        <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
+        <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">x2</span><span class="token operator">:</span> <span class="token number">100</span>
+    <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">series</span><span class="token operator">:</span> seriesData
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token comment">// 使用刚指定的配置项和数据显示图表。</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// 监听</span>
+state<span class="token punctuation">.</span>echartInstance <span class="token operator">=</span> myChart<span class="token punctuation">;</span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> myChart<span class="token punctuation">.</span>resize<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">onUnmounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
+window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> <span class="token keyword">null</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token keyword">const</span> <span class="token function-variable function">getHubConfig</span><span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
+ state<span class="token punctuation">.</span>hubData<span class="token operator">=</span><span class="token punctuation">[</span><span class="token operator">...</span>pieData<span class="token punctuation">]</span>
+<span class="token function">renderEchartLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
+<span class="token function">getHubConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
+<div class="hljs-button {2}" data-title="复制"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.7365&quot;}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li></ul></pre> 
+<p>饼图效果<br> <img src="https://img-blog.csdnimg.cn/direct/d62d22b057b1480da2118f4029d27eda.png" alt="pie-data"></p> 
+<h4><a name="t17"></a><a id="x1F496inscode_486"></a>💖inscode代码块</h4> 
+<p></p> 
+<div class="inscode-box">
+<iframe width="100%" height="500px" src="https://inscode.csdn.net/@qq_38870145/vue-csdn-grade/embed" scrolling="no" frameborder="no" allowfullscreen="allowfullscreen" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
+</div> 
+<p></p> 
+<h3><a name="t18"></a><a id="_489"></a>⭐总结</h3> 
+<p><strong>前端截图</strong><br> <img src="https://img-blog.csdnimg.cn/direct/168b1ae1a14b455fbcba0fec0b060659.png#pic_center" alt="data-visual"></p> 
+<p>以上是我2023的可视化数据</p> 
+<p><strong>可视化分析</strong><br> 可视化分析是通过图表、图形、地图等可视化的方式呈现数据和信息的分析方法。相比传统的数据分析方法，可视化分析具有以下优势：</p> 
+<ol><li> <p>更直观：可视化分析使用图表和图形展示数据，使数据变得更加直观和易于理解。通过可视化，人们可以快速地看到数据中的模式、趋势和关联，而不需要深入研究数据背后的复杂性。</p> </li><li> <p>更易于发现洞察力：可视化分析有助于发现隐藏在数据中的洞察力和新的信息。通过对数据进行可视化呈现，人们可以更容易地发现异常值、趋势、相关性和模式，从而提供新的洞察力和决策支持。</p> </li><li> <p>更高效的决策：可视化分析可以帮助人们更快速地做出决策。通过可视化呈现数据，人们可以更快地获取重要信息，了解业务情况，并基于这些信息做出决策。与传统的数据分析方法相比，可视化分析更加直观和高效。</p> </li><li> <p>更好的沟通和共享：可视化分析能够帮助人们更好地沟通和共享数据和信息。通过可视化呈现数据，人们可以更好地向他人解释数据和分析结果，并确保大家对数据的理解是一致的。同时，可视化结果可以很容易地与他人共享，并且可以轻松地被他人理解和使用。</p> </li><li> <p>更灵活的探索：可视化分析提供了一种灵活的数据探索方式。通过可视化工具，人们可以根据需要自由地探索数据，并以不同的角度和维度查看和分析数据。这种灵活性可以帮助人们发现潜在的模式和关联，且能够更好地理解数据背后的故事。</p> </li></ol> 
+<p><strong>图表的表现方式</strong><br> 目的：数据直观易懂<br> <strong>比较类</strong><br> 不同分类数据对比、不同时间数据对比</p> 
+<ul><li>柱状图、折线图</li></ul> 
+<p>同一纬度上的占比</p> 
+<ul><li>可选饼图</li></ul> 
+<p><strong>分布类</strong><br> 连续数据上的数值分布情况</p> 
+<ul><li>散点图</li></ul> 
+<p><strong>趋势图</strong><br> 数据在连续区域上的变化规律</p> 
+<ul><li>热力图</li></ul> 
+<p><strong>关联类</strong><br> 数据的前后关系、继承关系（因果关系）</p> 
+<ul><li>矩形树图</li></ul> 
+<h4><a name="t19"></a><a id="x1F496_2024__529"></a>💖 2024 展望</h4> 
+<p>2024年的计划我分为以下几点：</p> 
+<ol><li>热爱生活，开始健身</li><li>拥抱web3.0和gpt</li><li>追自己的梦，放平心态</li><li>坚持副业</li><li>stay hungry stay foolish</li></ol> 
+<h3><a name="t20"></a><a id="_537"></a>⭐结束</h3> 
+<p>本文分享到这结束，如有错误或者不足之处欢迎指出！<br> <img src="https://img-blog.csdnimg.cn/direct/35f87976abee417b80227004bbf17e78.png" alt="earth"></p> 
+<blockquote> 
+<p>👍 点赞，是我创作的动力！<br> ⭐️ 收藏，是我努力的方向！<br> ✏️ 评论，是我进步的财富！<br> 💖 最后，感谢你的阅读！</p> 
+</blockquote>
+            </div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;spm&quot;:&quot;1001.2101.3001.6548&quot;,&quot;dest&quot;:&quot;https://yma16.blog.csdn.net/article/details/135331462&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
+            <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet">
+            <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">
+    </div>
+    <div id="treeSkill" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.6866&quot;}" style="display: block;"><div class="skill-tree-box"><div class="skill-tree-head">文章知识点与官方知识档案匹配，可进一步学习相关知识</div><div class="skill-tree-body"><div class="skill-tree-item"><span class="skill-tree-href"><a data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6866&quot;,&quot;dest&quot;:&quot;https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog&quot;}" href="https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog" target="_blank">Python入门技能树</a><i></i><a data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6866&quot;,&quot;dest&quot;:&quot;https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog&quot;}" href="https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog" target="_blank">首页</a><i></i><a data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6866&quot;,&quot;dest&quot;:&quot;https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog&quot;}" href="https://edu.csdn.net/skill/python/?utm_source=csdn_ai_skill_tree_blog" target="_blank">概览</a></span><span class="skill-tree-con"><span class="skill-tree-count">384949</span> 人正在系统学习中</span></div></div></div></div>
+    <div id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"><div class="blog_extension blog_extension_type2" id="blog_extension">
+      <div class="extension_official" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6471&quot;}" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.6471&quot;}">
+      <div class="blog_extension_card_left">
+        <img src="https://img-blog.csdnimg.cn/da1368a485124f4cb41e35a229f6a04d.jpeg" alt="">
+      </div>
+      <div class="blog_extension_card_cont">
+        <span class="text">商务协作—技术交流</span>
+        <div class="blog_extension_card_cont_r">
+          <img class="weixin" src="https://g.csdnimg.cn/extension-box/1.1.6/image/weixin.png" alt="">
+          <span>微信名片</span>
+        </div>
+      </div>
+      <img class="blog_extension_card_right" src="https://g.csdnimg.cn/extension-box/1.1.6/image/ic_move.png" alt="">
+    </div></div></div>
+</article>
\ No newline at end of file

src/App.vue

@@ -5,12 +5,13 @@ import Draw from './components/draw/Draw.vue'
 import Commit from './components/commit/Commit.vue'
 import Drag from  './components/drag/Drag.vue'
 import Visual from  './components/visual/index.vue'
+import VisualHtml from  './components/visualHtml/index.vue'
 import { reactive, onBeforeMount,onMounted } from 'vue';
 import html2canvas from 'html2canvas';
 
 // state
 const state = reactive({
-  current: 'grade查询分数'
+  current: 'VisualHtml'
 })
 
 /** 下载图片 */
@@ -102,6 +103,7 @@ onBeforeMount(() => {
                 <a-radio value="评论">csdn分析评论</a-radio>
                  <a-radio value="拖拽">拼图</a-radio>
                  <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
+                 <a-radio value="VisualHtml">可视化 html</a-radio>
             </a-radio-group>
             <a-button type="primary" @click="shotAction">
                 截图
@@ -113,6 +115,7 @@ onBeforeMount(() => {
             <Commit v-else-if="state.current === '评论'" />
             <Drag v-else-if="state.current === '拖拽'"/>
             <Visual v-else-if="state.current === 'Visual'"/>
+            <VisualHtml v-else-if="state.current === 'VisualHtml'"/>
             <Draw v-else />
         </div>
     </div>

src/components/visualHtml/html/data.js

+import axios from 'axios'
+
+
+const getHtmlDoc = (htmlString) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlString, 'text/html');
+    return doc
+}
+
+function traverse(node) {
+    const children = []
+    const name = node.nodeName
+    // 遍历当前节点的子节点
+    for (let i = 0; i < node.childNodes.length; i++) {
+        const child = node.childNodes[i];
+        // 如果是元素节点，打印节点名称，并递归遍历子节点
+        if (child.nodeType === 1) {
+            const childItem = traverse(child)
+            children.push(childItem);
+        }
+    }
+    return {
+        name,
+        children
+    }
+}
+
+const genTreeData = async (htmlHref) => {
+    // 请求 html 内容
+    const {data:htmlContent}=await axios.get(htmlHref)
+
+    console.log('htmlContent',htmlContent)
+
+    const htmlDoc = getHtmlDoc(htmlContent)
+
+    const treeData=traverse(htmlDoc.body)
+    console.log('treeData',treeData)
+    return treeData
+}
+
+export const treeData =genTreeData
\ No newline at end of file

src/components/visualHtml/html/index.vue

 <template>
-    <div id="treeChartId" style="width:100%;height:300px;margin: 0 auto"></div>
+    <div>
+        <a-input-search v-model:value="state.htmlHref" placeholder="输入html链接" style="width: 100%;margin:10px;" @search="onSearch" />
+        <div id="treeChartId" style="width:100%;height:600px;margin: 0 auto"></div>
+    </div>
 </template>
 <script setup>
-    import * as echarts from 'echarts';
-import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
-import {treeData} from './data.js'
+import * as echarts from 'echarts';
+import { reactive, onUnmounted, onMounted } from 'vue';
+import { treeData } from './data.js'
 
 const state = reactive({
     exportLoading: false,
     echartInstance: undefined,
-    hubData:[],
+    treeData: [],
+    htmlHref:'htmlContent.html'
 })
 
 function renderEchartLine() {
     // 基于准备好的dom，初始化echarts实例
-    const domInstance=document.getElementById('treeChartId')
-    if(domInstance){
+    const domInstance = document.getElementById('treeChartId')
+    if (domInstance) {
         domInstance.removeAttribute('_echarts_instance_')
     }
-    else{
-        return 
+    else {
+        return
     }
     const myChart = echarts.init(domInstance);
-    const seriesItem= {
-      name: 'Access From',
-      type: 'pie',
-    //   radius: [20, 50],
-      center: ['50%', '50%'],
-    //   roseType: 'area',
-    //   itemStyle: {
-    //     borderRadius: 1
-    //   },
-      data:state.hubData,
-      label:{
-        color:'#ffffff'
-      },
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
-    }
-    const seriesData=[seriesItem]
+
+    const data = state.treeData
 
     const option = {
         title: {
-            text: '社区文章数量占比',
-            textStyle:{
-                color:'#ffffff'
-            }
-        },
-        toolbox: {
-            show: true,
-            feature: {
-                saveAsImage: {}
+            text: 'html可视化',
+            textStyle: {
+                color: '#ffffff'
             }
         },
         tooltip: {
-            trigger: 'axis',
-        },
-        xAxis: {
-            axisLabel:{
-                color:'#ffffff'
-            }
+            trigger: 'item',
+            triggerOn: 'mousemove'
         },
-        yAxis: {
-            axisLabel:{
-                color:'#ffffff'
+        series: [
+            {
+                type: 'tree',
+                id: 0,
+                name: 'html tree',
+                data: [data],
+                top: '10%',
+                left: '8%',
+                bottom: '22%',
+                right: '20%',
+                symbolSize: 7,
+                edgeShape: 'polyline',
+                edgeForkPosition: '63%',
+                initialTreeDepth: 3,
+                lineStyle: {
+                    width: 2
+                },
+                label: {
+                    backgroundColor: '#fff',
+                    position: 'left',
+                    verticalAlign: 'middle',
+                    align: 'right'
+                },
+                leaves: {
+                    label: {
+                        position: 'right',
+                        verticalAlign: 'middle',
+                        align: 'left'
+                    }
+                },
+                emphasis: {
+                    focus: 'descendant'
+                },
+                expandAndCollapse: true,
+                animationDuration: 550,
+                animationDurationUpdate: 750
             }
-        },
-        grid: {
-            x: 60,
-            x2: 100
-        },
-        series: seriesData
+        ]
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option, true);
@@ -84,15 +86,20 @@ function renderEchartLine() {
     window.onresize = myChart.resize;
 }
 
+const onSearch=async (htmlHref)=>{
+    state.treeData = await treeData(htmlHref)
+    renderEchartLine()
+}
+
 onUnmounted(() => {
     window.onresize = null
 })
-const getHubConfig= ()=>{
-     state.hubData=[...treeData]
+const getHubConfig = async () => {
+    state.treeData = await treeData(state.htmlHref)
     renderEchartLine()
 }
 
-onMounted(()=>{
+onMounted(() => {
     getHubConfig()
 })
 </script>
\ No newline at end of file

src/components/visualHtml/index.vue

 <script setup>
-    import {reactive,onMounted} from 'vue'
-    import VisualHtml from './html/index.vue'
-    import Author from '../Author.vue'
-    const state=reactive({
-        title:'',
-    })
+import { reactive, onMounted } from 'vue'
+import VisualHtml from './html/index.vue'
+import Author from '../Author.vue'
+const state = reactive({
+    title: '',
+})
 </script>
 <template>
     <div style="padding:20px;">
-        <Author/>
+        <Author />
         <div>
-            {{state.title}}
+            {{ state.title }}
             <div>
-                <VisualHtml />
+                <div>
+                   
+                </div>
+                <VisualHtml  />
             </div>
         </div>
     </div>