c# 后端 用Echart 饼状图显示供应商排名

前段时间给客户做了一个供应商按照采购额排名图表的展示

整体思路：c#后端获取排名信息，json传输到前端，前端jquery解析数据并赋值给图表

1.后端代码

  List<BuyStatByVenSumModel> list = new List<BuyStatByVenSumModel>();
            BuyStatByVenSumPara Para = new BuyStatByVenSumPara();
            BaseMessage msg = new BaseMessage();
            try
            {
                msg = GetBuyStatByVenTop(Para);
                if (msg.Flag)
                {
                    list = Para.DataList;
                }

            }
            catch (Exception ex)
            {
                
            }
            return Json(list, JsonRequestBehavior.AllowGet);

2.前端代码

/*按供应商排行统计采购额数据获取 */
        function GetVenTopChartData() {
            var VenArr = [];
            var VenDataArr = [];
            $.ajax({
                url: '/GetBuyStatByVenTop',
                data: {},
                type: "post",
                dataType: "json",
                timeout: 30000,
                async: false,
                success: function (data) {
                    var maxnum = 0;
                    if (!!data) {
                        if (data.length > 0) {
                            
                            for (var i = 0; i < data.length; i++) {
                                var obj = new Object();
                                VenArr.push(data[i].VenName);
                                obj.name = data[i].VenName;
                                obj.value = data[i].IMoney;
                                VenDataArr[i]=obj;

                            }
                        }
                    }
                    PieVen(VenArr, VenDataArr, maxnum);
                }
            });
        }

3.图表代码

function PieVen(xdata, ydata, maxnum) {
            var mypie = echarts.init(document.getElementById("BuyStatByVenTop"));
            optionpie = {
                title: {
                    text: '供应商采购排名',
                    subtext: '前五名',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: xdata
                },
                series: [
                    {
                        name: '采购额:',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: ydata,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            mypie.clear();
            mypie.setOption(optionpie, true);
        }