EChartsDemo-饼图01

一、Controller 后台代码(模拟数据)

using MaybeEleven.EchartsDemo.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MaybeEleven.EchartsDemo.Controllers
{
    public class HomeController : Controller
    {
        private int index = 0;

        [HttpGet]
        public ActionResult GetDepartmentEcharts()
        {
            if (Request.IsAjaxRequest())
            {
                List<Student> Students = new List<Student>
            {
                new Student{
                    Id=++index,
                    Name="张三",
                    CreateTime=DateTime.Now,
                    ModifyTime=null,
                    Department="骨科"
                },
                 new Student{
                    Id=++index,
                    Name="张三",
                    CreateTime=DateTime.Now,
                    ModifyTime=null,
                     Department="眼科"
                },
                  new Student{
                    Id=++index,
                    Name="李四",
                    CreateTime=new DateTime(2020,7,11),
                    ModifyTime=null,
                     Department="眼科"
                },
                   new Student{
                    Id=++index,
                    Name="赵六",
                     CreateTime=new DateTime(2019,7,11),
                    ModifyTime=null
                },
                    new Student{
                    Id=++index,
                    Name="张三是",
                    CreateTime=new DateTime(2018,7,11),
                    ModifyTime=null,
                     Department="妇科"
                },
                     new Student{
                    Id=++index,
                    Name="范德萨发生的",
                    CreateTime=new DateTime(2018,3,11),
                    ModifyTime=null,
                     Department="眼科"
                },
                      new Student{
                    Id=++index,
                    Name="赵六",
                     CreateTime=new DateTime(2019,7,11),
                    ModifyTime=null,
                     Department="耳鼻喉科"
                },
                    new Student{
                    Id=++index,
                    Name="张三是",
                    CreateTime=new DateTime(2003,7,11),
                    ModifyTime=null,
                     Department="耳鼻喉科"
                },
                     new Student{
                    Id=++index,
                    Name="范德萨发生的",
                    CreateTime=new DateTime(2002,3,11),
                    ModifyTime=null,
                     Department="眼科"
                },
                      new Student{
                    Id=++index,
                    Name="赵六",
                     CreateTime=new DateTime(2016,7,11),
                    ModifyTime=null,
                     Department="妇科"
                },
                    new Student{
                    Id=++index,
                    Name="张三是",
                    CreateTime=new DateTime(2015,7,11),
                    ModifyTime=null
                },
                     new Student{
                    Id=++index,
                    Name="范德萨发生的",
                    CreateTime=new DateTime(2018,3,11),
                    ModifyTime=null,
                     Department="骨科"
                },
            };

                var data = Students.GroupBy(g => g.CreateTime.Year)
                    .Select(g => new EchartsDepartmentEntity
                    {
                        value = g.Count(),
                        name = g.Key.ToString()
                    }).OrderBy(x => x.name);
                return Json(new { data = data }, JsonRequestBehavior.AllowGet);
            }

            return View();
        }

      
    }
}

二、实体类

using System;

namespace MaybeEleven.EchartsDemo.Models
{
    public class Student
    {

        public int Id { get; set; }

        public string Name { get; set; }

        public DateTime CreateTime { get; set; }

        public DateTime? ModifyTime { get; set; }

        public string Department { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MaybeEleven.EchartsDemo.Models
{
    public class EchartsEntity
    {
        public string name { get; set; }
        public dynamic value { get; set; }
    }

    public class EchartsDepartmentEntity : EchartsEntity
    {
        public string category { get; set; }
    }
}

三、渲染视图(ECharts5+jQuery 插件自己准备)+function返回echarts中需要的数据

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>年手术例数统计</title>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
             700px;
            height: 595px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        //Echart 图表容器
        var myChart = echarts.init(document.querySelector("#container"));
        $(function () {
            //文档就绪
            getEchatOperations()
        })

        //自定义函数返回格式 [{name:"2015",value:1320}]
        function getEchatOperations() {
            $.ajax({
                type: 'get',
                url:"@Url.Action("GetDepartmentEcharts", "Home")",
                dataType: 'json',
                success: function (res) {
                    // 绑定数据
                    renderChartOne(res.data)
                }
            })
        }
       
        function renderChartOne(d) {
           
          var   option = {
                title: {
                    text: "年手术例数统计",
                    subtext: "虚拟数据",
                    left: "center",
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    right: 'right'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: [50, 250],
                        roseType: 'area',
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: d
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    </script>
</body>
</html>