最近根據設計要求寫了一個統計圖，以下是設計要求，要求中間文字分別是總數和漢字，樣式分別不同
好吧具體的解決方案如下
方案一
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: { text:this.total,//主標題文本 subtext:'共發布活動',//副標題文本 left:'center', top:'32%', textStyle:{ fontSize: 38, color:'#454c5c', align:'center' }, subtextStyle:{ fontFamily : "微軟雅黑", fontSize: 16, color:'#6c7a89', } },
如下就是title的配置了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- echarts 引入 --> <script src="echarts.js"></script> <style type="text/css"> </style> </head> <body> <div id="main" style="width:500px;height:500px;"></div> <script> 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對象加載數據 </script> </body> </html>