通过zrender对象向echarts3中添加图形（shape）

2019独角兽企业重金招聘Python工程师标准>>>

需求概述：在环形饼状图中间添加一个固定的文字显示。

最开始的思路还是通过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后，可以直接通过命名空间来使用，所以我们的代码做如下调整：

运行后效果如图：

啊……终于成功了，程序猿的欣喜，，，，你懂的

通过zrender对象向echarts3中添加图形（shape）

你可能感兴趣的:(通过zrender对象向echarts3中添加图形（shape）)