最近在工作專案中用到echarts進行製作一個環形圖表，在網上查詢了很多屬性最終才製作成功，因此想總結一下，方便以後使用（第一次寫部落格，是不是這樣寫的哦）

　　匯入echarts.js啥的就不說了，直接開始配置屬性。

option = {
                legend: {　　　　　　　　　　　　//配置圖例
                    itemWidth: 5,　　　　　　　//圖例大小  我這裡用的是圓
                    itemGap: 30,　　　　　　　　//圖例之間的間隔
                    orient: 'horizontal',　　　//佈局方式，預設水平佈局，另可選vertical
                    y: 
 
'80%',　　　　　　　　　　//垂直放的位置，可以寫top，center，bottom，也可以寫px或者百分比。x軸方向同理，預設center
                    icon: "circle",　　　　　　//圖例的形狀，選擇型別有："circle"（圓形）、"rectangle"（長方形）、"triangle"（三角形）、"diamond"（菱形）、"emptyCircle"（空心圓）、
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"emptyRectangle"（空心長方形）、"emptyTriangle"（空心三角形）、"emptyDiamon"（空心菱形），還可以放自定義圖片，格式為"image://path",
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　path為圖片路徑
                   
 　　　　　　　　　　　selectedMode: 
 
false,　　　　//選中哪個圖例 false後圖例不可點選
                    textStyle: {　　　　　　　　　
                        fontSize: 14,
                        fontFamily: "Microsoft YaHei",

                    },
                    data: [{name: '達標', textStyle: {color: "#3999dd"}}, {　　　　//name和下面的series中data的name對應顯示。後面加textStyle可設定圖例後面文字的顏色
                        name: 
 
'未達標',
                        textStyle: {color: "#a3a6b4"}
                    }],
                    /*圖例旁邊顯示資料*/
                    formatter: function (name) {
                        var legendIndex = 0;
                        var clientlabels = [{name: '達標', textStyle: {color: "#3999dd"}}, {
                            name: '未達標',
                            textStyle: {color: "#a3a6b4"}
                        }];
                        var clientcounts = [result.standardNum, result.noStandardNum];
                        clientlabels.forEach(function (value, i) {
                            if (value.name == name) {
                                legendIndex = i;
                            }
                        });
                        return name + " " + clientcounts[legendIndex];
                    }

                },
                color: ["#e3f9ff", "#3999dd"],　　　　//環形圖兩部分的顏色
                graphic: [{　　　　　　　　　　　　　　　　//環形圖中間新增文字
                    type: 'text',　　　　　　　　　　　　//通過不同top值可以設定上下顯示
                    left: 'center',　　　　　　　　　　
                    top: '30%',
                    style: {　　　　　　　　　　　　　　　　
                        text: "80%"（自己設定顯示內容）,
                        textAlign: 'center',
                        fill: '#000',　　　　　　　　//文字的顏色
                        width: 30,
                        height: 30,
                        fontSize: 18,
                        color: "#4d4f5c",
                        fontFamily: "Microsoft YaHei"
                    }
                }, {
                    type: 'text',
                    left: 'center',
                    top: '45%',
                    style: {
                        text: '達標率',
                        textAlign: 'center',
                        fill: '#000',
                        width: 30,
                        height: 30,
                        fontSize: 18,
                    }
                }],
                series: [　　　　　　　　　　　　　　//配置資料啥的
                    {
                        name: '達標率',　　　　　　
                        type: 'pie',　　　　　　　　//設為餅圖
                        radius: ['60%', '70%'],　　//設定內半徑和外半徑，形成環狀
　　　　　　　　　　　　　　 minAngle:15,　　　　　　　　　//設定最小角度
　　　　　　　　　　　　　　 startAngle:270　　　　　　　//設定起始角度
　　　　　　　　　　　　　　 clockWise:false,　　　　　　　　//預設逆時針
                        avoidLabelOverlap: false,　　　//避免標註重疊
                        hoverAnimation: false,　　　　//移入放大
                        silent: true,
                        center: ['50%', '40%'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 20, name: '未達標'},
                            {value: 80, name: '達標'},
                        ]
                    }
                ]
            };

第一篇隨筆就這樣結束了，後面再總結下其他的，over！ 　　　　　　——千尋的小白龍  沖沖衝