echarts 添加自定义文字

方法一：配置 graphic

https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html

实例代码：

 

option = {
   
    graphic: [
         {
            type: 'group',
            left: 'center',
            bottom: 130,
            children: [
                {
                    type: 'rect',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    shape: {
                        width: 190,
                        height: 90
                    },
                    style: {
                        fill: '#fff',
                        stroke: '#555',
                        lineWidth: 2,
                        shadowBlur: 8,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        fill: '#333',
                        text: [
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字自定义文字',
                            '自定义文字'
                        ].join('\n'),
                        font: '14px Microsoft YaHei'
                    }
                }
            ]
        }
    ],
   
 
};

方法二：通过zrender添加

https://blog.csdn.net/qq_14855277/article/details/72823117

https://blog.csdn.net/qian5211991/article/details/81214174

实例代码：

var _zr = myChart.getZr();

_zr.add(new echarts.graphic.Text({
     style: {            
   x: _zr.getWidth() / 2,
   y: _zr.getHeight() / 2,
   textFill:'#888',
   text: '集团重大风险',
   textAlign: 'center', 
   textFont : 'bold 20px verdana'
   }}  
));
 
_zr.add(new echarts.graphic.Text({
 style: {            
  x: _zr.getWidth() / 4,
  y: _zr.getHeight() / 2.5,
  textFill:'red',
  text: '公里',
  textAlign: 'center', 
  textFont : 'bold 20px verdana red'
 }
}  
));

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);