echarts学习之给饼图中间添加文字

先看要实现的饼图效果图:


方法一:使用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|共发布活动}', 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|共发布活动}'

方法二:使用title

var myChart=echarts.init(document.getElementById('main'));//init初始化接口,返回ECharts实例,其中dom为图表所在节点 

 var option = { //标题 

 title : { 

 show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏)

 text: '主标题',//主标题文本,

'\n'指定换行 link:'',//主标题文本超链接,默认值true 

 target: null,//指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) subtext: '副标题',//副标题文本,'\n'指定换行 sublink: '',//副标题文本超链接 subtarget: null,//指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) x:'center'//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) y: 'top',//垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) textAlign: null,//水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色,默认'rgba(0,0,0,0)'透明 borderColor: '#ccc',//标题边框颜色,默认'#ccc' borderWidth: 0,//标题边框线宽,单位px,默认为0(无边框) padding: 5,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距 itemGap: 10,//主副标题纵向间隔,单位px,默认为10 textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontFamily: 'Arial, Verdana, sans...', fontSize: 12, fontStyle: 'normal', fontWeight: 'normal', }, subtextStyle: {//副标题文本样式{"color": "#aaa"} fontFamily: 'Arial, Verdana, sans...', fontSize: 12, fontStyle: 'normal', fontWeight: 'normal', }, zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。 z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。 }, //提示框,鼠标悬浮交互时的信息提示 tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, //图例,每个图表最多仅有一个图例 legend: { orient: 'vertical', left: 'left', data: ['第一部分','第二部分','第三部分','第四部分'] }, // 系列列表,每个系列通过 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: "{b} :\n {c} \n ({d}%)", position:"inner" } } } } ],};myChart.setOption(option);// 为echarts对象加载数据

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容