Echarts 数据绑定

官网实例Echarts 3.0 地址:http://echarts.baidu.com/examples/

1.HTML:

  <div class="box1">
            <div class="title"><p>按养殖性质</p></div>
            <div id="AreaChart_1" style="width: 100%;height: 90%;"></div>
        </div>

2.JS:

<script type="text/javascript">
          //初始加载
        $(function () {
            //创建实例
            InitChartData_1();//按养殖性质
        })
        function InitChartData_1(myChart_1) {
            $.ajax({
                url: "@Url.Action("GetMonitorXzData")",//后台方法
                type: "GET",
                success: function (data) {
                    ChartData_1(data);//获取的数据
                }
            });
        }
        function ChartData_1(d) {
            var myChart_1 = echarts.init(document.getElementById('AreaChart_1'));//html中的ID

            //不同的Echarts图展示只需要更换官网对应的不同option ,修改对应的绑定数据即可
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x: 'center',
                    y: 'bottom'
                    //data: d.lengendData
                },
                series: [
                    {
                        name: '养殖性质占比',
                        type: 'pie',
                        //radius: [30, 110],
                        radius: ['25%', '80%'],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        x: '100%',
                        max: 40,
                        sort: 'ascending',
                        data: d.datas
                    }
                ]
            };
            myChart_1.setOption(option);
        }
    </script>

3.C#:

/// <summary>
        /// 按养殖性质 
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public ActionResult GetMonitorXzData()
        {
            List<dynamic> datas = new List<dynamic>();
            List<string> lengendData = new List<string>();
            var list = unitOfWork.MonitorCompanyEntity.Query(t => true).GroupBy(t => t.MonitorXz).Select(t => new { companyCount = t.Count(), monitorXz = t.Key }).ToList();
            if (list.Count() > 0)
            {
                List<DataModel> companyXzModels = new List<DataModel>();
                string companyXzPath = Server.MapPath(SystemConfig.CompanyXz);
                companyXzModels = System.IO.File.ReadAllText(companyXzPath).FromJson<List<DataModel>>();

                list.ForEach(t =>
                {
                    var xzName = companyXzModels.FirstOrDefault(f => f.Value == t.monitorXz).IsNull(f => f.Name, "");
                    datas.Add(new { name = xzName, value = t.companyCount });//循环累加想要的数据
                    lengendData.Add(xzName);
                });
            }
            else //无数据时显示
            {
                datas.Add(new { name = "无数据", value = 0 });
                lengendData.Add("无数据");
            }
            return Json(new
            {
                lengendData = lengendData.ToArray(),
                datas = datas.ToArray()
            }, JsonRequestBehavior.AllowGet);
        }

4. 效果展示: