Echarts使用心得

最新推荐文章于 2021-05-05 20:59:13 发布

原创最新推荐文章于 2021-05-05 20:59:13 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #图表 #c# #动态绑定数据 #json

C# 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在项目中使用Echarts遇到的问题及解决经验，重点分享了如何从数据库获取数据并动态绑定到Echarts图表，同时提到了Echarts-plain.js的使用，避免了require.config配置难题。还分享了自己封装的js代码，增加了饼图点击事件，并提供了代码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目需要用到图表，网上查了资料，看到百度的Echarts挺不错的，就拿过来使用。实际使用中才发现很多的问题，记录下来，方便以后查看。

本文参看如下：

1、百度echarts简介请参考 http://echarts.baidu.com/

2、星星之火116 写的“Echarts使用心得总结”

3、http://www.cnblogs.com/mqingqing123/p/3780979.html

解决方案布局：

其中asmx是冲数据库获取数据，javascript为js脚本库。其中我使用了echarts-plain.js文件，百度文档里面的描述如下：

echarts-plain.js : 经过压缩，包含除地图外的全部图表
echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

使用该js文件，就不需要配置require.config，当初为了配置config‘的路径问题弄了很久也没有解决。

1，从数据库获取数据绑定到图表

/// <summary>
    /// 设备接入统计
    /// </summary>
    /// <returns></returns>
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
    public string Device_WorkStateCount_Echarts()
    {
        string result = string.Empty;

        try
        {
            //SqlHelper queryWhere = new SqlHelper();
            //queryWhere.AddCondition(View_DEVICE_PURCHASE.M_UNIT_ORG_CODE, Operator.Equal, DataTypeUtils.String, "");

            EntitySet<View_DEVICE_PURCHASE> entSet = Bll_View_DEVICE_PURCHASE.Search("");
            if (entSet != null)
            {
                ArrayList arrayList = new ArrayList();

                var List = entSet.Where(p => !string.IsNullOrEmpty(p.DEV_GUID))
                    //.GroupBy(p => p.UNIT_ORG_CODE)
                    .GroupBy(p => new { p.UNIT_ORG_CODE, p.UNIT_ORG_CODE_NAME })
                    .OrderBy(p => p.Key.UNIT_ORG_CODE)
                    .Select(group => new { value = group.Key, DevCnt = group.Count() });

                foreach (var item in List)
                {
                    /* 获取组织机构名称 */
                    //BASIC_ORG_DOMAIN org = Bll_Basic_DomainInfo.GetEntity_ByDomainCode(item.value.UNIT_ORG_CODE);

                    var list = new { value = item.DevCnt, name = item.value.UNIT_ORG_CODE_NAME, orgCode = item.value.UNIT_ORG_CODE };
                    arrayList.Add(list);

                }

                if (jsS == null) { jsS = new JavaScriptSerializer(); }
                //序列化返回josn数组
                result = jsS.Serialize(arrayList);
            }
        }
        catch (Exception ex)
        {
            // logsave
            ISS.WDC.Framework.Common.Logging.Logging.SaveLog(ISS.WDC.Framework.Common.Logging.ELogType.BusinessRule
                , string.Format("Device_WorkStateCount_Echarts('','','',''):设备接入统计.EXP:{1}", "", "", "", "", ex.ToString())
                , ISS.WDC.Framework.Common.Logging.EPriority.High, System.Diagnostics.TraceEventType.Error);
        }
        return result;
    }

/* 建设概况 */
function Div1Main1(divName) {
    //ajax获取数据并设置
    $.ajax({
        type: 'POST',
        url: 'Asmx/ECharts.asmx/Device_WorkStateCount_Echarts',
        data: {},
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: function (json) {
            if (json) {
                DrawPieSelected(json, divName, "Div1SpanMsg1", "Div1SpanTable1");
                Div1SpanTable1(""); /* 第一次加载全部的使用状态情况 */
            }
        },
        error: function (data) { alert('数据加载失败'); }

    });
}

下面是我自己重新封装的js，新增了饼图点击事件。