歡迎來到《小5講堂》
大家好，我是全棧小5。
這是《前端》系列文章，每篇文章將以博主理解的角度展開講解，
特別是針對知識點的概念進行敘說，大部分文章將會對這些概念進行實際例子驗證，以此達到加深對知識點的理解和掌握。
溫馨提示：博主能力有限，理解水平有限，若有不對之處望指正！

背景

前面幾篇文章在做一個數(shù)據(jù)統(tǒng)計圖表的功能，對于圖表第三方插件，接觸比較多的是echarts，
由于隔了好長時間沒怎么用這個插件，很多具體細節(jié)使用基本都忘了，因此本篇文章將回顧柱狀圖常見功能

標題

主標題

設置主標題，以及主標題的樣式，居中顯示，并設置字體為橙色、加粗、18px像素大小
要設置標題的樣式，可以在 title 屬性中使用 textStyle 屬性。

option = {title:{text:'一周產(chǎn)品銷量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]
};

1）left:‘center’，表示標題居中顯示
2）textStyle，屬性下就是設置主標題的樣式

副標題

設置 副標題，以及 副題的樣式，居中顯示，并設置字體加粗
使用的屬性是，subtext和subtextStyle

option = {title:{text:'一周產(chǎn)品銷量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'單位：件',subtextStyle:{fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]
};

柱子信息

直接在取消柱子上方顯示具體數(shù)據(jù)信息，以及自定義信息，比如100%，數(shù)字后面加一個百分號
1）show，顯示節(jié)點上的文本信息
2）position，文本位置，可以根據(jù)需要調(diào)整為 ‘top’, ‘bottom’, ‘inside’, ‘insideTop’, 等
top，表示在節(jié)點上方

inside，表示在節(jié)點里

3）formatter，顯示的文本內(nèi)容，這里使用節(jié)點的值，可以自定義顯示值
4）textStyle，文本顏色

option = {title:{text:'一周產(chǎn)品銷量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'單位：件',subtextStyle:{fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar',label:{show:true,position:'top',formatter:function(data){return data.value+'件'}}}]
};

鼠標信息

鼠標移動到柱子上時，能夠自動彈出數(shù)據(jù)進行顯示，使用的屬性是tooltip

option = {title:{text:'一周產(chǎn)品銷量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'單位：件',subtextStyle:{fontWeight:'bold'}},tooltip:{trigger: 'axis',formatter:function(datas){return datas[0].name+'：'+datas[0].value+'件'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar',label:{show:true,position:'top',formatter:function(data){return data.value+'件'}}}]
};

可視化庫

常見前端數(shù)據(jù)可視化庫
1.D3.js

• D3.js（Data-Driven Documents）是一個強大的JavaScript庫，用于創(chuàng)建基于數(shù)據(jù)的交互式可視化圖表。
• 提供了強大的數(shù)據(jù)綁定和DOM操作功能，支持各種圖表類型的定制和創(chuàng)建。
• Mike Bostock及社區(qū)貢獻者

2.Chart.js

• Chart.js 是一個簡單而靈活的圖表庫，支持各種基本圖表類型，包括線圖、柱狀圖、餅圖等。
• 具有輕量級的特性，易于上手和集成。
• Chart.js 團隊團隊開發(fā)和維護

3.Highcharts

• Highcharts 是一個功能豐富的圖表庫，提供了多種圖表類型，包括線圖、區(qū)域圖、散點圖等。
• 具有良好的文檔和社區(qū)支持，支持響應式設計。
• Highsoft AS團隊開發(fā)和維護

4.Plotly

• Plotly 是一個開源的JavaScript圖表庫，支持創(chuàng)建交互式的繪圖和可視化。
• 提供了豐富的圖表類型，包括散點圖、線圖、3D圖等。
• Plotly Technologies Inc.團隊開發(fā)和維護

5.Google Charts

• Google Charts 是由Google開發(fā)的圖表庫，支持各種常見的圖表類型，如柱狀圖、餅圖、地圖等。
• 可以通過簡單的API集成到Web應用中。
• Google團隊開發(fā)和維護

6.AntV G2Plot

• AntV G2Plot 是螞蟻金服開發(fā)的一個基于G2引擎的圖表庫，提供了一系列現(xiàn)代化、精美的圖表。
• 具有良好的設計和交互性能，支持多種圖表類型。
• 螞蟻金服團隊開發(fā)和維護

7.Three.js

• Three.js 是一個用于創(chuàng)建3D圖形的JavaScript庫，可以用于創(chuàng)建復雜的三維可視化場景。
• 適用于需要展示復雜三維數(shù)據(jù)的場景，如科學可視化、虛擬現(xiàn)實等。
• Three.js 團隊開發(fā)和維護

8.ECharts

• ECharts 是一個由百度開發(fā)和維護的基于 JavaScript 的數(shù)據(jù)可視化庫，用于構建交互式和可定制的圖表。
• 提供了豐富的圖表類型和靈活的配置選項，滿足各種數(shù)據(jù)可視化需求。
• ECharts 由百度開發(fā)和維護

這些庫在不同場景和需求下都有其優(yōu)勢，選擇合適的庫取決于項目的具體要求、開發(fā)團隊的經(jīng)驗和個人偏好。

Vue影響

Vue 的崛起可能會影響之前基于純 JavaScript（JS）開發(fā)的前端數(shù)據(jù)可視化庫，但并不一定會導致它們被完全替換。以下是一些可能發(fā)生的情況：

1. 適配和整合：許多現(xiàn)有的數(shù)據(jù)可視化庫已經(jīng)意識到 Vue 的流行，并提供了與 Vue 框架更好的集成。這意味著開發(fā)者可以使用這些庫的 Vue 版本，從而更輕松地在 Vue 項目中使用它們。

2. 新的Vue專用庫：隨著 Vue 的持續(xù)發(fā)展，可能會出現(xiàn)一些專門針對 Vue 框架開發(fā)的數(shù)據(jù)可視化庫。這些庫可能會利用 Vue 的特性和生態(tài)系統(tǒng)，提供更加優(yōu)化和靈活的解決方案。

3. 項目遷移：對于已經(jīng)使用舊的數(shù)據(jù)可視化庫的項目，開發(fā)者可能會考慮將其遷移到與 Vue 更好集成的解決方案上，以便更好地利用 Vue 的優(yōu)勢和特性。

4. 競爭與演進：盡管 Vue 的崛起可能會影響傳統(tǒng)的數(shù)據(jù)可視化庫，但這并不意味著它們會被完全取代。一些庫可能會繼續(xù)存在并適應變化，通過提供更好的功能、更好的性能或更好的用戶體驗來與 Vue 相競爭。

總的來說，Vue 的崛起可能會對前端數(shù)據(jù)可視化庫產(chǎn)生影響，但是否會導致其被完全替換取決于多個因素，包括開發(fā)者的偏好、現(xiàn)有庫的適應能力以及新的技術趨勢。

文章推薦

【Echarts】曲線圖上方顯示數(shù)字以及自定義值，標題和副標題居中，鼠標上顯示信息以及自定義信息
【Echarts】柱狀圖上方顯示數(shù)字以及自定義值，標題和副標題居中，鼠標上顯示信息以及自定義信息
【隨筆】程序員如何選擇職業(yè)賽道，目前各個賽道的現(xiàn)狀如何，那個賽道前景巨大
【隨筆】程序員的金三銀四求職寶典，每個人都有最合適自己的求職寶典

總結：溫故而知新，不同階段重溫知識點，會有不一樣的認識和理解，博主將鞏固一遍知識點，并以實踐方式和大家分享，若能有所幫助和收獲，這將是博主最大的創(chuàng)作動力和榮幸。也期待認識更多優(yōu)秀新老博主。