echarts內通過zrender新增文字，圖形等
需求概述：在環形餅狀圖中間新增一個固定的文字顯示。
最開始的思路還是通過echarts提供現有的圖表實現，其實就是在餅狀圖的中間新增一個單項data的餅圖，效果就是一個實心圓型圖，然後把label的位置設定成inner，效果如下：
這樣實現的程式碼如下（option程式碼）：
option = {
legend: {
orient: 'vertical',
x: 'left',
data:['政治風險','廉政風險','瀆職風險','績效風險']
},
series: [
{
name:'風險預警',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position : 'inner',
distance : 0.1
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:25, name:'集團重大風險'}
]
},
{
name:'訪問來源',
type:'pie',
radius: ['30%', '55%'],
data:[
{value:25, name:'政治風險'},
{value:25, name:'廉政風險'},
{value:25, name:'瀆職風險'},
{value:25, name:'績效風險'}
]
}
]
};
但這樣實現有很多問題，中間是一個餅圖還是感覺很怪，而且標籤的位置沒辦法調，文件中有記錄distance屬性是標籤到圓心的距離和半徑的比，但我怎麼改都不起作用。
於是還要另想辦法，在網上看到一個相關類似的問題，解決思路是用zrender新增shape圖形。
所以第一步想如何獲取zrender物件：
在網上看有這樣的程式碼
var myChart = echarts.init(document.getElementById('riskInfo'));
var _zr = myChart.getZrender();
自己試了試發現不好用，原來echarts3已經改成了myChart.getZr();
改下自己的程式碼果然好用了，獲取到了zrender物件。
第二步如何通過zrender新增圖形呢：
同樣在網上搜到了addShape這個方法，但仍然還是不好用，一定是echarts3又有改動
所以我們還是要先了解一下這個物件，用下面的程式碼來看看這個物件都提供了哪些方法
function ShowObjProperty(Obj)
{
var PropertyList='';
var PropertyCount=0;
for(i in Obj){
if(Obj.i !=null)
PropertyList=PropertyList+i+'屬性：'+Obj.i+'\r\n';
else
PropertyList=PropertyList+i+'方法\r\n';
}
alert(PropertyList);
}
其中引數obj就是我們要檢視的物件，也就是把zrender物件傳進來就可以了，跑起來輸出如下圖：
可以看到還是有很多方法的，其中的確沒有addShape，但是有個add，所以猜測一定是這個add方法。
這個add方法要如何用呢，沒辦法還是看看原始碼吧：
/**
* 新增元素
* @param {module:zrender/Element} el
*/
add: function (el) {
this.storage.addRoot(el);
this._needsRefresh = true;
}
cover.add(new graphic.Rect({
name: 'main',
style: makeStyle(brushOption),
silent: true,
draggable: true,
cursor: 'move',
drift: curry(doDrift, controller, cover, 'nswe'),
ondragend: curry(trigger, controller, {isEnd: true})
}));
這兩段程式碼差不多就是add的定義和應用，引數傳入大概就是zrender的圖形，正和我們的需求一致，所以仿照原始碼，改一下我們的程式碼，這裡再說一下其中的graphic，在原始碼中我們可以找到它的定義，echarts引入了很多內容，其中就有這兩項
var graphic = __webpack_require__(43);
var zrender = __webpack_require__(81);
不管是怎麼引入的，我們現在可以確定通過graphic可以建立一個可新增的圖形，echarts3中不再需要require方式去使用這些庫，標籤方式引入echarts後，可以直接通過名稱空間來使用，所以我們的程式碼做如下調整：
var myChart = echarts.init(document.getElementById('riskInfo'));
var _zr = myChart.getZr();
ShowObjProperty(_zr);
_zr.add(new echarts.graphic.Text({
style: {
x: _zr.getWidth() / 2,
y: _zr.getHeight() / 2,
color: '#666',
text: '集團重大風險',
textAlign: 'center',
textFont : 'bold 20px verdana'
}}
));
option = {
legend: {
orient: 'vertical',
x: 'left',
data:['政治風險','廉政風險','瀆職風險','績效風險']
},
series: [
{
name:'訪問來源',
type:'pie',
radius: ['30%', '55%'],
data:[
{value:25, name:'政治風險'},
{value:25, name:'廉政風險'},
{value:25, name:'瀆職風險'},
{value:25, name:'績效風險'}
]
}
]
};
myChart.setOption(option);
執行後效果如圖：
啊……終於成功了，程式猿的欣喜，，，，你懂的