.net+mvc+bootstrap+echarts实现圆环图

前端：

  <div id="echart1"></div>

js代码：

function GetEchart1()
        {
            var code =
            {
                StartYear: $("#StartYear").val(),
                EndYear: $("#EndYear").val()
            };
            var names = [];
            var mydata = [];
            var json_str = JSON.stringify(code);

            $.ajax({
            url:'@Url.Action("GetEchart1")',
            type: "post",
            dataType: "json",
            async: true,
            data: { code: json_str},
                success: function (data)
                {
               // debugger;
               // alert(data.SumApplyQty.length);
               // console.log(data.VSM);
                for (var i = 0; i < data.SumApplyQty.length; i++) {
                    names.push(data.PPEType[i]);
                    mydata[i] = { value: data.SumApplyQty[i], name: data.PPEType[i] };
                }

                    var chartDom = document.getElementById('echart1');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option =
                        {
                    backgroundColor: "rgb(26, 27, 32)",
                        tooltip:
                        {
                        trigger: 'item',
                        //formatter: '{a} <br/>{b} : {c}%'
                        formatter: '{b} : {c}'

                        },

                        title: {
                        text: 'PPE 领用分布',
                        // subtext: 'Fake Data',
                        left: 'center',
                        textStyle: {
                            color: 'white',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: 'sans-serif'
                        }

                        },
                        legend:
                        {
                        orient: 'vertical',
                        left: 'center',
                        bottom: 'bottom',
                            textStyle:
                            {
                            color: 'white',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontFamily: 'sans-serif'
                            },
                            data: names
                        },
                        color: ['#00ccff', '#5470c6', '#91cc75', '#fac858', '#ee6666'], // 自定义颜色
                        series: [
                            {
                            //name: '访问来源',
                            type: 'pie',
                            minAngle: 10, // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                            radius: ['40%', '68%'],
                            center: ['48%', '53%'],
                                label:
                                {
                                formatter: '{b|{b}}\n（{c}）\n', // 这里的设置就是饼图的标签内容及其格式
                                    rich:
                                    {

                                        b:
                                        {
                                        align: 'center'

                                        }

                                    }
                                },
                            data: mydata
                        }
                    ]
                };

        option && myChart.setOption(option);
            }
        });
    };

后端代码：

  public string GetEchart1(string code)
        {

            Dictionary<string, object> dic = _service.GetUserInfoDic();
            dic.Add("Action", "SumPPEReceived");
            Dictionary<string, object> dx = Newtonsoft.Json.JsonConvert.DeserializeObject<Dictionary<string, object>>(code);
            Dictionary<string, object> newdic = new Dictionary<string, object>();

            newdic = dic.Union(dx).ToDictionary(key => key.Key, value => value.Value);

            DataSet ds = _service.Query("usp_PPE_Common", XmlParams.CreateSqlXml(newdic));
            DataTable dt = ds.Tables[0];
            List<string> PPETypeList = new List<string>();
            List<string> SumApplyQtyList = new List<string>();

            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    DataRow dataRow = dt.Rows[i];
                    PPETypeList.Add(dataRow["PPEType"].ToString());
                    SumApplyQtyList.Add(dataRow["SumApplyQty"].ToString());

                }
                var obj = new
                {
                    PPEType = PPETypeList,
                    SumApplyQty = SumApplyQtyList,

                };
                string jsonstr = JsonConvert.SerializeObject(obj);
                return jsonstr;
            }
            else
            {
                string jsonstr = "";
                return jsonstr;
            }
        }

数据格式：

效果图：