echarts 環形圖配置 圖例設置，中間文字設置

　　最近在工作項目中用到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！ 　　　　　　——千尋的小白龍  沖沖沖