在前端工作中我們會經常遇使用echart來做圖表，餅狀圖和圖例也是大家經常會使用到的，這里文匯軟件小編就來為大家介紹如何更換工具條的圖標及如何調整餅狀圖的大小。
首先我們先了解如何使用echart,echart的具體配置項就在其官網文檔里的配置項手冊中，echart一共有22種類型，但是我們經常使用的大部分都是折線圖、餅狀圖和柱狀圖。
我們今天主要了解餅狀圖，以下圖為例：
它所對應的代碼如下圖：
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 設置觸發類型，默認數據觸發，可選值：'item' | 'axis'
trigger: 'item',
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 20, // 隱藏延遲，單位ms
backgroundColor: 'rgba(0,0,0,0.4)', // 提示框背景顏色
textStyle: {
fontSize: '16px',
color: '#fff' // 設置文本顏色 默認#FFF
},
// formatter設置提示框顯示內容
// {a}指series.name 指series.data的name
// {c}指series.data的value ejufiel%指這一部分占總數的百分比
formatter: ' : {c}個 (dbtwnio%)'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
其中toolbox指的是工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。toolbox中的feature指的是各工具配置項。除了各個內置的工具按鈕外，還可以自定義工具按鈕。像是這次我們就只定義了數據視圖、還原和保存為圖片三個工具條，他們默認的圖標為下圖：
但是我們可以通過feature中每個不同的配置項的icon指定每個不同的圖標
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',},
}
最終如下圖所示：
另外對于圓形在區域中的大小可以通過series中的radius屬性來調整
series: {
name:'aaa',
type: 'pie',
radius : '75%',
center: ['50%', '50%'],
data: res
},
結果如下圖所示：
好了，今天就是文匯軟件小編為大家分享的文章，如果喜歡小編的話就來文匯軟件來看小編更多的文章吧。
