美文网首页
Echarts 和 Ajax

Echarts 和 Ajax

作者: 贰丶萌 | 来源:发表于2018-04-10 15: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>

    相关文章

      网友评论

          本文标题:Echarts 和 Ajax

          本文链接:https://www.haomeiwen.com/subject/wbaghftx.html