Echarts 和 Ajax

2018-04-10  本文已影响0人  贰丶萌

1、json

public JsonResult Return_Title(string RelGuid)
{
    Base_Model base_Model = new Base_Model();

    if (string.Format("{0}", RelGuid) != "")
    {
        base_Model = new Base_Dal().GetDetailByCE("EchartsBase_003", "RelGuid", RelGuid);
    }

    JsonResult jr_TextStyle = Return_TextStyle(base_Model.CE13);

    JsonResult json = new JsonResult();
    json.Data = new
    {
        show = base_Model.CE01,
        text = base_Model.CE02,
        left = base_Model.CE03,
        top = base_Model.CE04,
        right = base_Model.CE05,
        bottom = base_Model.CE06,
        x = base_Model.CE07,
        y = base_Model.CE08,
        backgroundColor = base_Model.CE09,
        borderColor = base_Model.CE10,
        borderWidth = base_Model.CE11,
        borderRadius = base_Model.CE12,
        textStyle = jr_TextStyle,
    };
    return json;
    //JavaScriptSerializer js = new JavaScriptSerializer();
    //string treeStr = js.Serialize(json.Data);
    //return Content(treeStr);

}




<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('@divModel.CE01'));

    var dataarr = {};
    $.ajax({
        async: false, //这句必须加
        method: 'post',
        url: 'Return_Title',
        data: { "RelGuid": '@divModel.RowGuid' },
        dataType: "json",
        success: function (data) {
            dataarr = data;
        }
    });


    option = {
        title: dataarr,

        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };


    //myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

2、String

 public ActionResult Return_Title(string RelGuid)
{
    Base_Model base_Model = new Base_Model();

    if (string.Format("{0}", RelGuid) != "")
    {
        base_Model = new Base_Dal().GetDetailByCE("EchartsBase_003", "RelGuid", RelGuid);
    }

    JsonResult jr_TextStyle = Return_TextStyle(base_Model.CE13);

    JsonResult json = new JsonResult();
    json.Data = new
    {
        show = base_Model.CE01,
        text = base_Model.CE02,
        left = base_Model.CE03,
        top = base_Model.CE04,
        right = base_Model.CE05,
        bottom = base_Model.CE06,
        x = base_Model.CE07,
        y = base_Model.CE08,
        backgroundColor = base_Model.CE09,
        borderColor = base_Model.CE10,
        borderWidth = base_Model.CE11,
        borderRadius = base_Model.CE12,
        textStyle = jr_TextStyle,
    };
    //return json;
    JavaScriptSerializer js = new JavaScriptSerializer();
    string treeStr = js.Serialize(json.Data);
    return Content(treeStr);

}

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('@divModel.CE01'));

    var dataarr = {};
    $.ajax({
        async: false, //这句必须加
        method: 'post',
        url: 'Return_Title',
        data: { "RelGuid": '@divModel.RowGuid' },
        dataType: "text",
        success: function (data) {
            dataarr = data;
        }
    });

    option = {
        title: JSON.parse(dataarr),

        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
  
    //myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
上一篇下一篇

猜你喜欢

热点阅读