echarts學(xué)習(xí)之如何給餅圖中間添加文字
先看要實(shí)現(xiàn)的餅圖效果圖

方法一:使用series
series: [
{
type:'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
color:'#4c4a4a',
formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共發(fā)布活動(dòng)}',
rich: {
total:{
fontSize: 35,
fontFamily : "微軟雅黑",
color:'#454c5c'
},
active: {
fontFamily : "微軟雅黑",
fontSize: 16,
color:'#6c7a89',
lineHeight:30,
},
}
},
emphasis: {//中間文字顯示
show: true,
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
},
tooltip: {
show: false
}
},
data:this.pieDataList2
}
]
只要在formatter里這樣寫就可以啦,rich里面寫你需要的樣式即可
formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共發(fā)布活動(dòng)}'方法二:使用title
title: {
text:this.total,//主標(biāo)題文本
subtext:'共發(fā)布活動(dòng)',//副標(biāo)題文本
left:'center',
top:'32%',
textStyle:{
fontSize: 38,
color:'#454c5c',
align:'center'
},
subtextStyle:{
fontFamily : "微軟雅黑",
fontSize: 16,
color:'#6c7a89',
}
},
title配置如下
var myChart=echarts.init(document.getElementById('main'));
//init初始化接口,返回ECharts實(shí)例,其中dom為圖表所在節(jié)點(diǎn)
var option = {
//標(biāo)題
title : {
show:true,//顯示策略,默認(rèn)值true,可選為:true(顯示) | false(隱藏)
text: '主標(biāo)題',//主標(biāo)題文本,'\n'指定換行
link:'',//主標(biāo)題文本超鏈接,默認(rèn)值true
target: null,//指定窗口打開主標(biāo)題超鏈接,支持'self' | 'blank',不指定等同為'blank'(新窗口)
subtext: '副標(biāo)題',//副標(biāo)題文本,'\n'指定換行
sublink: '',//副標(biāo)題文本超鏈接
subtarget: null,//指定窗口打開副標(biāo)題超鏈接,支持'self' | 'blank',不指定等同為'blank'(新窗口)
x:'center'//水平安放位置,默認(rèn)為'left',可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
y: 'top',//垂直安放位置,默認(rèn)為top,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
textAlign: null,//水平對(duì)齊方式,默認(rèn)根據(jù)x設(shè)置自動(dòng)調(diào)整,可選為: left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//標(biāo)題背景顏色,默認(rèn)'rgba(0,0,0,0)'透明
borderColor: '#ccc',//標(biāo)題邊框顏色,默認(rèn)'#ccc'
borderWidth: 0,//標(biāo)題邊框線寬,單位px,默認(rèn)為0(無邊框)
padding: 5,//標(biāo)題內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距
itemGap: 10,//主副標(biāo)題縱向間隔,單位px,默認(rèn)為10
textStyle: {//主標(biāo)題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副標(biāo)題文本樣式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一級(jí)層疊控制。默認(rèn)0,每一個(gè)不同的zlevel將產(chǎn)生一個(gè)獨(dú)立的canvas,相同zlevel的組件或圖標(biāo)將在同一個(gè)canvas上渲染。zlevel越高越靠頂層,canvas對(duì)象增多會(huì)消耗更多的內(nèi)存和性能,并不建議設(shè)置過多的zlevel,大部分情況可以通過二級(jí)層疊控制z實(shí)現(xiàn)層疊控制。
z: 6,//二級(jí)層疊控制,默認(rèn)6,同一個(gè)canvas(相同zlevel)上z越高約靠頂層。
},
//提示框,鼠標(biāo)懸浮交互時(shí)的信息提示
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
},
//圖例,每個(gè)圖表最多僅有一個(gè)圖例
legend: {
orient: 'vertical',
left: 'left',
data: ['第一部分','第二部分','第三部分','第四部分']
},
// 系列列表,每個(gè)系列通過 type 決定自己的圖表類型
series : [
{
name: '訪問',
type: 'pie',
radius : '62%',
center: ['50%', '65%'],/
minAngle:'15',
data:[
{name:"第一部分",value:4},
{name:"第二部分",value:7},
{name:"第三部分",value:3},
{name:"第四部分",value:1},
],
itemStyle: {
normal:{
label:{
show:true,
formatter: " :\n {c} \n (vvxyksv9kd%)",
position:"inner"
}
}
}
}
],
};
myChart.setOption(option);// 為echarts對(duì)象加載數(shù)據(jù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
遇到網(wǎng)頁上有精美圖片或者精彩文字想保存時(shí),通常大家都是選中目標(biāo)后按鼠標(biāo)右鍵,在彈出菜單中選擇“圖片另存為”或“復(fù)制”來達(dá)到我們的目的。但是,目前有許多網(wǎng)頁都屏蔽了鼠標(biāo)右鍵,那么用js如何實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能呢?下面小編給大家介紹下2016-10-10
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法...2007-09-09
JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間???????
這篇文章主要介紹了JS?Angular服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間,???????通過setTimeout模擬一個(gè)需要5秒鐘才能完成調(diào)用的API展開詳情,需要的小伙伴可以參考一下2022-06-06
three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果
這篇文章主要給大家介紹了關(guān)于three.js利用卷積法如何實(shí)現(xiàn)物體描邊效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03
firefox瀏覽器下javascript 拖動(dòng)層效果與原理分析代碼
這篇文章主要給大家介紹了關(guān)于在firefox瀏覽器下如何利用javascript實(shí)現(xiàn)拖動(dòng)層效果,以及其中的原理分析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面來一起看看吧2007-12-12
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對(duì)innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
學(xué)習(xí)JavaScript設(shè)計(jì)模式之中介者模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的中介者模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01

