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度角傾斜顯示
                }
            }
        ],