Echarts饼图中间显示自定义内容及解决柱状图横坐标文字过多显示不全的问题

1.Echarts饼状图中间自定义显示内容（文字、图片）

实现这种效果主要是通过graphic中的对象属性type和style实现，type设置为‘text’，则style中可以设置文字内容，type设置为‘image’,则style中可以设置图片内容，以下是完整代码：

（1）创建div标签

<div id="box"></div>

（2）定义option

var option = {
    tooltip: {
        show: false //隐藏鼠标悬浮提示文字
        //trigger: 'item'
     },
    color: ['#61C4E6', '#F9F9F9'],
    graphic: [
    { //设置饼状图内部文字
        type: 'text',
        left: 'center', //设置偏移量
        top: 180,
        z: 2,
        zlevel: 100,
    style: {
        text: 文字内容,
        x: 100,
        y: 100,
        textAlign: 'center',
        fill: '#89D4ED',
        width: 200,
        height: 200,
        textFont: 'bold 20px verdana'
    }
            },
    { //设置饼状图内部图片
        type: 'image',
        left: 100,
        top: 208,
        z: 2,
        zlevel: 100,
        style: {
            image: 图片的url,
            x: 100,
            y: 100,
            textAlign: 'center',
            fill: '#ABAEB6',
            width: 20,
            height: 20,
            textFont: 'bold 20px verdana',
            color: 'red'
            }
        },

    ]

        };

（3）渲染Echarts

var chart = echarts.init(document.getElementById('box')

chart.setOption(option)

2.Echarts横坐标底部显示的文字太长导致显示不全

我们可以将文字倾斜显示，设置interval属性将横轴信息全部显示

grid: { // 控制图的大小，调整下面这些值就可以，
    x: 40,
    x2: 100,
    y2: 150 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
xAxis: [
    {
        name: "",
        type: 'category',
        data: accoutTypeName,
        axisLabel:{
            interval:0,//横轴信息全部显示
            rotate:-30 //-30度角倾斜显示
                }
            }
        ],