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

背景

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

標(biāo)題

主標(biāo)題

設(shè)置主標(biāo)題，以及主標(biāo)題的樣式，居中顯示，并設(shè)置字體為橙色、加粗、18px像素大小
要設(shè)置標(biāo)題的樣式，可以在 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’，表示標(biāo)題居中顯示
2）textStyle，屬性下就是設(shè)置主標(biāo)題的樣式

副標(biāo)題

設(shè)置 副標(biāo)題，以及 副題的樣式，居中顯示，并設(shè)置字體加粗
使用的屬性是，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ù)字后面加一個(gè)百分號(hào)
1）show，顯示節(jié)點(diǎn)上的文本信息
2）position，文本位置，可以根據(jù)需要調(diào)整為 ‘top’, ‘bottom’, ‘inside’, ‘insideTop’, 等
top，表示在節(jié)點(diǎn)上方

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

3）formatter，顯示的文本內(nèi)容，這里使用節(jié)點(diǎn)的值，可以自定義顯示值
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+'件'}}}]
};

鼠標(biāo)信息

鼠標(biāo)移動(dòng)到柱子上時(shí)，能夠自動(dòng)彈出數(shù)據(jù)進(jìn)行顯示，使用的屬性是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+'件'}}}]
};

可視化庫(kù)

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

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

2.Chart.js

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

3.Highcharts

• Highcharts 是一個(gè)功能豐富的圖表庫(kù)，提供了多種圖表類型，包括線圖、區(qū)域圖、散點(diǎn)圖等。
• 具有良好的文檔和社區(qū)支持，支持響應(yīng)式設(shè)計(jì)。
• Highsoft AS團(tuán)隊(duì)開發(fā)和維護(hù)

4.Plotly

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

5.Google Charts

• Google Charts 是由Google開發(fā)的圖表庫(kù)，支持各種常見(jiàn)的圖表類型，如柱狀圖、餅圖、地圖等。
• 可以通過(guò)簡(jiǎn)單的API集成到Web應(yīng)用中。
• Google團(tuán)隊(duì)開發(fā)和維護(hù)

6.AntV G2Plot

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

7.Three.js

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

8.ECharts

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

這些庫(kù)在不同場(chǎng)景和需求下都有其優(yōu)勢(shì)，選擇合適的庫(kù)取決于項(xiàng)目的具體要求、開發(fā)團(tuán)隊(duì)的經(jīng)驗(yàn)和個(gè)人偏好。

Vue影響

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

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

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

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

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

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

文章推薦

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

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