在前端工作中我們會(huì)經(jīng)常遇使用echart來(lái)做圖表，餅狀圖和圖例也是大家經(jīng)常會(huì)使用到的，這里文匯軟件小編就來(lái)為大家介紹如何更換工具條的圖標(biāo)及如何調(diào)整餅狀圖的大小。
首先我們先了解如何使用echart,echart的具體配置項(xiàng)就在其官網(wǎng)文檔里的配置項(xiàng)手冊(cè)中，echart一共有22種類(lèi)型，但是我們經(jīng)常使用的大部分都是折線圖、餅狀圖和柱狀圖。
我們今天主要了解餅狀圖，以下圖為例：
它所對(duì)應(yīng)的代碼如下圖：
var myChart =document.getElementById('LAY-index-dataview1');
// 繪制圖表。
echarts.init(myChart).setOption({
title : {
text: '科室分布',
x: 'center',
y: 290,
textStyle:{
color:'#666',
fontWeight:'normal',}
},
series: {
name:'aaa',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data: res
},
toolbox: {
bottom:"0",
height:330,
show : true,
right: '0',
top: '0',
feature : {
dataView : {show: true, readOnly: false, icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_1.jpg',},
restore : {show: true, icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_2.jpg',},
saveAsImage : {show: true, icon: 'image://http://http://pb.i.cnwenhui.com/views/images/echart_3.jpg',},
}
},
tooltip: {
// trigger 設(shè)置觸發(fā)類(lèi)型，默認(rèn)數(shù)據(jù)觸發(fā)，可選值：'item' | 'axis'
trigger: 'item',
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 20, // 隱藏延遲，單位ms
backgroundColor: 'rgba(0,0,0,0.4)', // 提示框背景顏色
textStyle: {
fontSize: '16px',
color: '#fff' // 設(shè)置文本顏色 默認(rèn)#FFF
},
// formatter設(shè)置提示框顯示內(nèi)容
// {a}指series.name 指series.data的name
// {c}指series.data的value 66nzm7hx%指這一部分占總數(shù)的百分比
formatter: ' : {c}個(gè) (66nzm7hx%)'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
其中toolbox指的是工具欄。內(nèi)置有導(dǎo)出圖片，數(shù)據(jù)視圖，動(dòng)態(tài)類(lèi)型切換，數(shù)據(jù)區(qū)域縮放，重置五個(gè)工具。toolbox中的feature指的是各工具配置項(xiàng)。除了各個(gè)內(nèi)置的工具按鈕外，還可以自定義工具按鈕。像是這次我們就只定義了數(shù)據(jù)視圖、還原和保存為圖片三個(gè)工具條，他們默認(rèn)的圖標(biāo)為下圖：
但是我們可以通過(guò)feature中每個(gè)不同的配置項(xiàng)的icon指定每個(gè)不同的圖標(biāo)
feature : {
dataView : {show: true, readOnly: false, icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_1.jpg',},
restore : {show: true, icon: 'image://http://pb.i.cnwenhui.com/views/images/echart_2.jpg',},
saveAsImage : {show: true, icon: 'image://http://http://pb.i.cnwenhui.com/views/images/echart_3.jpg',},
}
最終如下圖所示：
另外對(duì)于圓形在區(qū)域中的大小可以通過(guò)series中的radius屬性來(lái)調(diào)整
series: {
name:'aaa',
type: 'pie',
radius : '75%',
center: ['50%', '50%'],
data: res
},
結(jié)果如下圖所示：
好了，今天就是文匯軟件小編為大家分享的文章，如果喜歡小編的話就來(lái)文匯軟件來(lái)看小編更多的文章吧。
