ECharts圖表引用json數據

 

　　來說兩個圖表，一個折線圖，一個餅圖。

先來看看效果圖：

 

 

　　如今來看看代碼，先來折線圖，後臺：

(這裏的後臺太麻煩了，寫的太多。能夠使用Linq的方式，Linq比較簡單寫的也少。參考個人這篇文章的2018.7.2號的更新)

   public ActionResult GetCourse()
        {
            
            string [] Name=new string [3];
            int[] Count=new int[3];

            string sql = "select top 3 a.ClassName,b.SelectCount  from Course a inner join (select ClassNumber,COUNT(*) SelectCount from SelectCourse group by ClassNumber) b on a.ClassNumber=b.ClassNumber  order by SelectCount desc";

            SqlHelper sqlHelper = new SqlHelper();
            DataTable dataTable = sqlHelper.SqlConnectionInformation(sql);

            for (int i = 0; i < dataTable.Rows.Count; i++)
            {
                Name[i] = dataTable.Rows[i]["ClassName"].ToString();
                Count[i] = int.Parse(dataTable.Rows[i]["SelectCount"].ToString());
            }

            var EName = JsonConvert.SerializeObject(Name);
            var ECount = JsonConvert.SerializeObject(Count);

            string json = $"{{\"name\":{EName},\"count\":{ECount}}}";


            return Json(json);
        }

 

　　而後前臺：引用文件本身去寫

    <div id="main" style="width: 600px;height: 400px;float:left" ></div>


<script type="text/javascript">

    var json;

    $.ajax({
        type: "post",
        url: "/CourseCount/GetCourse",
        dataType: 'JSON',
        success: function (data) {

            json = JSON.parse(data);
            myChart.setOption({
                title: {
                    text: '熱門課程前三甲'
                },
                tooltip: {},
                legend: {
                    data: ['選課人數']
                },
                xAxis: {
                    data: json.name


                },
                yAxis: {},
                series: [{
                    name: '選課人數',
                    type: 'line',
                    data: json.count
                }]
            });

        }
    });




    //將echart初始化到div中
    var myChart = echarts.init(document.getElementById('main'));
        //指定圖表的配置項和數據
<scripts>

 

 

　　如今是餅圖，後臺：

   public ActionResult GetBing()
        {

            string[] Name = new string[5];
            int[] Count = new int[5];

            string sql = "select top 5 a.ClassName,b.SelectCount  from Course a inner join (select ClassNumber,COUNT(*) SelectCount from SelectCourse group by ClassNumber) b on a.ClassNumber=b.ClassNumber  order by SelectCount desc";

            SqlHelper sqlHelper = new SqlHelper();
            DataTable dataTable = sqlHelper.SqlConnectionInformation(sql);

            for (int i = 0; i < dataTable.Rows.Count; i++)
            {
                Name[i] = dataTable.Rows[i]["ClassName"].ToString();
                Count[i] = int.Parse(dataTable.Rows[i]["SelectCount"].ToString());
            }

            var EName = JsonConvert.SerializeObject(Name);
            var ECount = JsonConvert.SerializeObject(Count);

            string json = $"{{\"value\":{ECount},\"name\":{EName}}}";


            return Json(json);
        }

 

　　前端：

    <div id="bing" style="width: 600px;height: 400px;float:left"></div>

<scripts>
    var jsonbing;
    var bing = echarts.init(document.getElementById('bing'));

    var brower = [];
    var listname=[];
    var listvalue=[] ;

    $.ajax({
        type: "post",
        url: "/CourseCount/GetBing",
        dataType: 'JSON',
        success: function (data) {

            jsonbing = JSON.parse(data);
            listname = jsonbing.name;
            listvalue = jsonbing.value;


            for (i = 0; i < 5; i++) {
                brower.push({
                    value: listvalue[i],
                    name: listname[i]
                    });
            }


        bing.setOption({
                title: {
                    text: '熱門課程前五甲',
                    subtext: '熱度比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br />{b} : {c} ({d}%)"
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: listname
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: brower,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
    

        }
    });
<scripts>