echarts之餅圖

常規柱形統計圖

橫向柱狀統計圖

以下是餅圖代碼：

<div id="pieChart" style="width:100% ;height:300px;"></div>

設置餅圖的屬性：

getPie() {
    // 繪製圖表
    var myChart = echarts.init(document.getElementById('pieChart'))
    this.option1 = {
        stillShowZeroSum: true,
        //鼠標劃過時餅狀圖上顯示的數據
        tooltip: {
            trigger: 'item',
            formatter: '{b}:{c} ({d}%)'
        },
        //圖例
        legend: {//圖例  標註各種顏色代表的模塊
            orient: 'vertical',//圖例的顯示方式  默認橫向顯示
            // bottom: 5,//控制圖例出現的距離  默認左上角
            left: 'left',//控制圖例的位置
            // itemWidth: 25,//圖例顏色塊的寬度和高度
            // itemHeight: 12,
            textStyle: {//圖例中文字的樣式
                color: '#000',
                fontSize: 14
            },
            data: ['已逾期', '未還款', '已還款']//圖例上顯示的餅圖各模塊上的名字
        },
        //餅圖中各模塊的顏色
        color: ['#FF5850', '#2D93FF', '#71D801'],
        // 餅圖數據
        series: {
            // name: 'bug分佈',
            type: 'pie',             //echarts圖的類型   pie代表餅圖
            // radius: '75%',
            radius: ['43%', '70%'],//餅圖中餅狀部分的大小所佔整個父元素的百分比
            center: ['50%', '50%'],  //整個餅圖在整個父元素中的位置
            // data:''               //餅圖數據
            data: [                  //每個模塊的名字和值
                {name: '已逾期', value: this.overdueCount},
                {name: '未還款', value: this.returnCount},
                {name: '已還款', value: this.returnedMoney}
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,//餅圖上是否出現標註文字 標註各模塊代表什麼  默認是true
                        // position: 'inner',//控制餅圖上標註文字相對於餅圖的位置  默認位置在餅圖外
                    },
                    labelLine: {
                        show: true//官網demo裏外部標註上的小細線的顯示隱藏    默認顯示
                    }
                }
            },
        }

    }
    //使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(this.option1)
},

在鉤子函數中調用：

this.getPie()

拿到數據後賦值：

this.option1.series.data[0].value = respond.data.data.overdueCount
this.option1.series.data[1].value = respond.data.data.returnCount
this.option1.series.data[2].value = respond.data.data.returnedMoney
var myChart = echarts.init(document.getElementById('pieChart'));
myChart.setOption(this.option1);

效果如下：