ECharts 在 .net 中实现动态加载数据 柱图

前台

<div id="min2" style="width: 100%; height: 550px; float: left"></div>

<script type="text/javascript">
                                    // 基于准备好的dom，初始化echarts实例
                                    var myChart2 = echarts.init(document.getElementById('min2'));
                                    var color = ['#a140f3', '#c787fd', '#e9c9fb']
                                    // 指定图表的配置项和数据
                                    option2 = {
                                        color: color,
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                        },
                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '16%',
                                            top: '3%',
                                            containLabel: true
                                        }, xAxis: {
                                            type: 'category',

                                            data: []
                                        },
                                        yAxis: {
                                            type: 'value',
                                        },

                                    };
                                    loadajax()
                                    function loadajax() {
                                        $.ajax({
                                            type: "post",  //请求方式
                                            url: "SWSMZB_Service.ashx",  //请求路径：页面/方法名字
                                            data: {
                                                sys_type: 'setChart2',
                                                year1: $("#year1_value").html(),
                                                month1: $("#month_value").html()
                                            },     //参数 
                                            dataType: "json",
                                            async: false,
                                            success: function (result) {  //成功
                                                if (result) {
                                                    var xAxis = {
                                                        type: 'category',
                                                        data: result.legend_data,
                                                       axisLabel: {
                                                            interval: 0,
                                                            rotate: 20,//倾斜度 -90 至 90 默认为0  
                                                            margin: 10,
                                                        },
                                                    }, series = [
                                                                    {
                                                                        type: 'bar',
                                                                        stack: '总数',
                                                                        label: {
                                                                            normal: {
                                                                                show: true,
                                                                                position: 'insideRight'
                                                                            }
                                                                        },
                                                                        data: result.series_data,
                                                                        itemStyle: {
                                                                            normal: {
                                                                                shadowBlur: 10,
                                                                                shadowOffsetX: 0,
                                                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                                            },
                                                                            emphasis: {//normal显示阴影,与shadow有关的都是阴影的设置

                                                                                shadowBlur: 30,//阴影大小
                                                                                shadowOffsetX: 0,//阴影水平方向上的偏移
                                                                                shadowOffsetY: 0,//阴影垂直方向上的偏移
                                                                                shadowColor: 'rgba(0,0,0,0.5)'//阴影颜色
                                                                            }
                                                                        }
                                                                    }

                                                    ]
                                                    option2.xAxis = xAxis;
                                                    option2.series = series;
                                                }
                                            }
                                        });
                                        myChart2.setOption(option2);
                                    }
                                 </script>

后台

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using 12OA.DB.Table;

namespace 12OA.JMJKGL.XQJKZK
{
    /// <summary>
    /// SWSMZB_Service 的摘要说明
    /// </summary>
    public class SWSMZB_Service : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string Sys_type = context.Request["sys_type"];
            if (Sys_type == "setChart2")
            {
                json = SetChart2();
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write(json);
            context.Response.End();
        }

        public string SetChart2()
        {
            string cmd = "";
            string sql = @"select jbmc,sws from tbl_swyy_Info where 1=1  ";
             cmd = " and bgrq='" + year1 + "' and jbmc like '%小计' and sws>1  order by sws desc";
           //使用DataTable 保存数据
            DataTable dt = FrmBase.GetDataTable_Select(sql);

            string data_Fl = "";
            string data = "";
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                data_Fl += "\"" + dt.Rows[i]["jbmc"].ToString() + "\",";
                data += " { \"value\": " + dt.Rows[i]["sws"] + ", \"name\": \"" + dt.Rows[i]["jbmc"].ToString() + "\" },";

            }
            return "{\"legend_data\":[" + data_Fl.TrimEnd(',') + "]," + "\"series_data\":[" + data.TrimEnd(',') + "] }";
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

最终实现的效果