C#Echart的前后端传值

AI程序猿

已于 2023-04-17 18:39:49 修改

阅读量240

点赞数 1

文章标签： c# echarts javascript

于 2023-04-17 18:33:00 首次发布

本文链接：https://blog.csdn.net/qq_33790894/article/details/130206373

版权

前端JS

<Html>
<style type="text/css">
        .chart {
            width: 470px;
            height: 300px;
            border: dashed 0.1px lightgray;
            float: left;
        }
</style>
<script type="text/javascript" src="Scripts/echarts.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false })//解决缓存问题导致的chart数据不更新
window.onload = function () {
            Test();            
        }

function Test() {
            var chart = echarts.init(document.getElementById("chart_id", "light"));


            chart.showLoading();
            $.get(
                'Test.ashx',
                {
                    
                    id:"123456"
                },
                function (data) {
                    chart.hideLoading();
                   
                    //var obj = eval(data);
                    var Y = data.split('-')[0];
                    var N = data.split('-')[1];

                    chart.setOption(
                        {
                            title: {
                                text: 'Chart 标题',
                                
                                x: 'center',
                                y: 'bottom'
                            },

                            tooltip: {  //提示框
                                trigger: 'item'
                            },
                            legend: {   //图形解释组件配置
                                orient: 'vertical',
                                left: 'left'
                            },
                            series: [
                                {
                                    name: 'series name',
                                    type: 'pie', //chart类型
                                    radius: '50%',
                                    data: [
                                       
                                        { value: Y, name: '参加' },
                                         { value: N, name: '未参加' }

                                    ],
                                    label: {
                                        normal: {//Label格式化 加%百分号
                                            show: true,
                                            formatter: '{b}:{c}人({d}%)'
                                        }
                                    }
                                    ,
                                    emphasis: {//透明度设置
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },
                                    itemStyle: {
                                        normal: {    //柱状图颜色自定义
                                            color: function (params) {
                                                var colorList = [ 'deepskyblue','lightgray'];
                                                return colorList[params.dataIndex]
                                            }

                                        }
                                    }
                                }
                                
                            ]
                        }

                    );



                }
            );



        }
</script>
<body>
<div class="chart" id="chart_id"></div>
</body>
</Html>

后端Test.ashx

using System.Web;
using System.Data;
public class CrossTrainingAjax : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
            
        string ID = context.Request["id"].Trim().ToString();
        //ID 获取JS传过来的ID号
        string Y="30";
        string N = "70";
        context.Response.Write(Y+"-"+N);//返回值


    }