vue項目中vue-echarts講解及常用圖表實現方案(推薦)
圖表類的項目操作一般常見于管理平臺系統，移動端項目中并不是特別常見，不常見不代表沒有，在一些商城類應用中，商家需要看到商品的銷量分析，盈利分析等，就需要用到圖標，比較常用的圖標庫，像百度的ECHARTS，螞蟻金服的AntV都是不錯的圖標庫，感興趣的讀者可以直接到他們的官網閱讀相關的資料，筆者這里不做優(yōu)劣說明，主要針對vue-echarts的一些圖表方案進行講解。
vue-echarts是基于echarts封裝實現的一個組件庫，直接按照正常的組件引用方式，安裝引用即可，具體的安裝和引用讀者可以直接閱讀vue-echarts技術文檔。
在使用過程中，有開發(fā)人員可能會碰到這種問題，命名將bar或者line引入進來了，但是圖標上還是有有部分內容沒有顯示出來，造成這種現象的原因，是因為你沒有將對應的組件引入，詳情可參考vue-echarts demo內容，下面給出簡單引用示例：
import ECharts from "vue-echarts"; import "echarts/lib/chart/bar"; import "echarts/lib/chart/line"; import "echarts/lib/chart/pie"; import "echarts/lib/component/tooltip"; import "echarts/lib/component/legend"; import "echarts/lib/component/markPoint"; import "echarts/lib/component/markLine"; import "echarts/lib/component/graphic";
這篇文章主要針對以下示例中的內容進行問題講解，如果你碰到的問題不在以下圖表內，沒興趣就不要浪費時間往下看了：
1.圖表主題顏色的修改
echarts中有三種常見主題類型: default, light, dark，讀者沒有太大的顏色要求的話，可以直接修改theme。
示例如下：
<v-chart :options="barOptions" autoresize theme="light"></v-chart>
柱狀圖顏色的修改可以在options參數中直接添加color數組，如下示例：
options:{
...
color: ["#64CDF0", "#F5686F"],
...
}另外可參考官方示例，直接添加theme.json文件。
2.XY軸體顏色和文本顏色修改
x軸的樣式修改可以在xAxis配置參數中進行設置，y軸在yAxis中進行配置，可以修改軸線的顏色，文本的顏色大小，圖標內分割線的顏色等，詳細的參數設置可以參考配置文檔，下面給出示例：
options: {
...
xAxis: [
{
type: "category",
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
// 修改文本的顏色
axisLabel: {
color: "#BB3137",
fontSize: 10
},
// 修改軸線的顏色
axisLine: {
lineStyle: {
color: "#BB3137"
}
}
}
],
yAxis: [
{
type: "value",
axisLabel: {
color: "#BB3137",
fontSize: 10
},
// 修改y軸橫向分割線的顏色
splitLine: {
lineStyle: {
color: ["#FFC9CB"]
}
},
axisLine: {
lineStyle: {
color: "#BB3137"
}
}
}
],
...
}
3.橫向柱狀圖的顯示
在配置xAxis和yAxis的時候，第一個參數就是type，這個參數用于說明該軸的類型，當x的type為value，y的type為category的時候，柱狀圖就會顯示成橫向柱狀圖。
4.過濾xy軸文本內容
上圖二中，如果沒有做任何處理，x軸會顯示20000,40000…這種類型，這樣顯示內容較長，不太友好，那么怎么改成上述那種顯示呢？
xy軸文本的配置項中，都有formatter這一配置項，直接在這里進行修改就可以，示例如下：
xAxis: [
{
type: "value",
axisLabel: {
fontSize: 10,
formatter: function(value, index) {
return parseInt(value / 10000) + "萬";
}
}
}
],
5.Y軸文本顯示在軸線內
刻度標簽默認是顯示在刻度線左側，如果想要顯示在右側，需要將inside設置為true即可，當進行此設置后，刻度標簽可能會被柱狀圖覆蓋掉，這時候，還需要設置zlevel，示例如下：
inverse: true,
axisLabel: {
fontSize: 10,
inside: true,
interval: 0
},
zlevel: 1
inverse是用來顯示是否翻轉刻度線上的內容，即默認從上往下是321顯示，如果你不想這樣顯示，將inverse設為true，就會按照123方式顯示。
6.在柱狀條頭部添加標簽內容
在series中添加label標簽即可，可以在此標簽內進行文本內容的顏色，位置，內容等的設置，如下示例：
series: [
{
name: "直接訪問",
type: "bar",
barWidth: "40%",
label: {
show: true,
position: "right",
color: "#3D383A",
formatter: "￥{c}"
},
data: [28540, 33534, 9390, 80330, 37220]
}
]
7.自定義圖例修改
如上圖所示，我想要自定義設置圖例中的文本內容，讓圖例文本可以換行顯示，并且大小顏色可以任意設置，這該如何設置呢？
雖然樣式顯示并不復雜，但是想在echarts中實現，卻是有些麻煩，formatter支持函數自定義修改，我們可以通過此方法來進行設置，將想要顯示的內容數據設置成全局變量，然后在此方法中進行操作修改，所有的設置均在legend參數中進行配置。
默認的圖例是個方形，如果想要改成圓形，可以將icon設置成circle，即可將圖例設置成原型，大小可以通過itemWidth和itemHeight來設置。
示例如下：
legend: {
icon: "circle", // 將圖例設置成原型
bottom: 0,
left: "center",
itemWidth: 10,
itemHeight: 10,
// itemGap: 10,
formatter: name => {
let data = pieData; // 全局變量
let value = "";
let price = "";
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
value = data[i].value;
price = data[i].price;
}
}
let arr = [
"{a|" + name + " " + value + "%}",
"{b|￥" + price + "}"
];
return arr.join("\n");
},
textStyle: {
rich: {
a: {
fontSize: 12,
width: 100,
align: "left"
},
b: {
width: 100,
fontSize: 14,
align: "left",
lineHeight: 20,
padding: [0, 0, 5, 0]
}
}
},
data: ["一季度", "二季度", "三季度", "四季度"]
},
var pieData = [
{ value: 28, name: "一季度", price: 108626.0 },
{ value: 24, name: "二季度", price: 93108.0 },
{ value: 19, name: "三季度", price: 73710.0 },
{ value: 29, name: "四季度", price: 112506.0 }
];
8.環(huán)比圖中間顯示內容
官方示例中并沒有給出環(huán)比圖中間顯示自定義圖文的內示例，有個示例是，點擊圓環(huán)內容，中間顯示點擊區(qū)域對應的內容名稱，這個太過簡單，并不能滿足自定義中間區(qū)域圖文的要求，想要實現這種要求，就需要用到graphic，在使用時需要單獨引用出來，否則會報錯，這是一個原生圖形元素組件支持image，text，circle等元素。
使用示例如下：
options: {
...
graphic: {
type: "group",
top: "middle",
left: "center",
height: 80,
children: [
{
type: "text",
left: "center",
top: "30%",
style: {
text: "全年總業(yè)績",
textAlign: "center",
textVerticaAlign: "middle",
fill: "#999",
font: "15px 'Helvetica',sans-serif"
}
},
{
type: "text",
top: "60%",
left: "center",
position: [0, 10],
style: {
text: "9912322.00",
textAlign: "center",
textVerticaAlign: "middle",
fill: "#3d383a",
font: "22px 'Helvetica',sans-serif"
}
}
]
},
...
}
vue-echarts的圖標的使用和echarts并沒有太大的區(qū)別，官方文檔中的說明配置項比較多，重點是能夠理解那些配置項，基本就可以滿足大部分要求。
到此這篇關于vue項目中vue-echarts講解及常用圖表方案實現的文章就介紹到這了,更多相關vue常用圖表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue+elementUI實現點擊按鈕互斥效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了Vue vxe-table使用問題收錄小結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
今天小編就為大家分享一篇解決$store.getters調用不執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了Vue使用v-viewer實現圖片預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue 單頁應用和多頁應用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
本文主要介紹了electron最小化托盤設置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue el-tree 默認展開第一個節(jié)點的實現代碼
這篇文章主要介紹了vue el-tree 默認展開第一個節(jié)點的實現代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
pinia是vue3官方的狀態(tài)管理工具,當然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強、更好,下面這篇文章主要給大家介紹了關于Vue3之Pinia狀態(tài)管理的相關資料,需要的朋友可以參考下2022-11-11
vue?watch中如何獲取this.$refs.xxx節(jié)點
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了@error函數vue圖片加載失敗空白頁解決方案，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08