ljw6285005
御风l
采纳率0%
2017-05-19 07:52

asp.net使用echarts连接sql数据库并在页面显示

假设有个商品表,包含商品编号(主键),商品名和销量。最好是在下面的例子上改,求源码啊

<!DOCTYPE html>



ECharts
<!-- 引入 echarts.js -->



<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

<br> // 基于准备好的dom,初始化echarts实例<br> var myChart = echarts.init(document.getElementById(&#39;main&#39;));</p> <pre><code> // 指定图表的配置项和数据 var option = { title: { text: &#39;ECharts 入门示例&#39; }, tooltip: {}, legend: { data:[&#39;销量&#39;] }, xAxis: { data: [&quot;衬衫&quot;,&quot;羊毛衫&quot;,&quot;雪纺衫&quot;,&quot;裤子&quot;,&quot;高跟鞋&quot;,&quot;袜子&quot;] }, yAxis: {}, series: [{ name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); &lt;/script&gt; </code></pre> <p></body><br> </html></p>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • ljw6285005 御风l 4年前

    回答出来能运行的,重酬!!!

    点赞 1 评论 复制链接分享
  • qq_34313263 朝闻道夕拾花 4年前

    说说我的做法:
    1.把数据中查询的table转换为option:
    public string getAvgOverLoadtoolId(string toolId, DateTime? startTime, DateTime? endTime)
    {
    StringBuilder sb = new StringBuilder();
    sb.Append(" SELECT COUNT(A.CNC_TOOL_ID) AS toolIdCounts,");
    sb.Append(" A.CNC_TOOL_ID,SUM(ISNULL(A.SpindleOverload,0)) AS SpindleOverload,");
    sb.Append(" CAST(CAST(SUM(ISNULL(A.SpindleOverload,0))AS DECIMAL(10,2))/COUNT(A.CNC_TOOL_ID) AS DECIMAL(10,2)) AS yData,");
    sb.Append(" A.CurrentLife,A.Index_C,");
    sb.Append(" A.CurrentLife/POWER(10,A.Index_C)+(SELECT CountValue FROM dbo.cnc_d_cnc_CountType WHERE IsUse='Y') AS xData");
    sb.Append(" FROM dbo.cnc_d_cnc_detail_log_overload A");
    sb.Append(" LEFT JOIN dbo.cnc_d_cnc_NoisePointStandard B");
    sb.Append(" ON A.CNC_ID=B.CNC_ID");
    sb.Append(" AND A.CNC_TOOL_ID=B.CNC_TOOL_ID");
    sb.Append(" WHERE 1=1");
    sb.Append(" AND ISNULL(A.SpindleOverload,0)<(SELECT TOP 1 ISNULL(B.NoiseStandard,1)*ISNULL(B.NoiseMultiple,1))");
    sb.AppendFormat(" AND A.CNC_TOOL_ID='{0}'", toolId);
    if (startTime != null)
    sb.AppendFormat(" AND DATEDIFF(MINUTE,'{0}',A.CREATE_DT)>=0", startTime);
    if (endTime != null)
    sb.AppendFormat(" AND DATEDIFF(MINUTE,'{0}',A.CREATE_DT)<0", endTime);
    sb.Append(" GROUP BY A.CNC_TOOL_ID,A.CurrentLife,A.Index_C");
    sb.Append(" ORDER BY xData");

            DataTable dt = BizPortal.Instance.QuerySQL("Default", sb.ToString(), null);
            return Core.Common.EChartObject.ChartLineDataToOption(dt, toolId + "刀具主轴平均负载折线图(已去除噪点)", "主轴负载");
        }
    
            public static string ChartLineDataToOption(DataTable dtData, string titleText = "", string legend = "",string chartType="line")
        {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("{");
            //添加标题
            jsonBuilder.Append("title:{ x: 'center',");
            jsonBuilder.AppendFormat("text: '{0}'", titleText);
            jsonBuilder.Append("},");
            //添加tooltip
            jsonBuilder.Append("tooltip: {trigger:'axis'},");          
            //添加grid,防止容器溢出
            jsonBuilder.Append("grid: {left: '20%',right: '20%',bottom: '3%',containLabel: true },");          
            //添加yAxis: 
            jsonBuilder.Append("yAxis: {type: 'value',axisLabel: { formatter: '{value}'}},");
            //添加dataZoom(滚动条)
            jsonBuilder.Append("dataZoom : {show : true,realtime : true,y: 36,height: 20,start : 40,end : 60},");
    
            //添加series: 
            jsonBuilder.Append("series:[");
            StringBuilder sbx = new StringBuilder();
            StringBuilder sby = new StringBuilder();
            for (int i = 0; i < dtData.Rows.Count; i++)
            {
                sbx.Append("'");
                sby.Append("'");
                sbx.Append(dtData.Rows[i]["xData"].ToString());
                sby.Append(dtData.Rows[i]["yData"].ToString());
                sbx.Append("'");
                sby.Append("'");
                if (i != dtData.Rows.Count - 1) 
                {
                    sbx.Append(",");
                    sby.Append(",");
                }                  
            }
            jsonBuilder.Append("{");
            jsonBuilder.AppendFormat("roam: false,name:'{0}',type:'{1}',smooth:{2},data:[{3}],", legend, chartType, "true", sby.ToString());
            //添加最大值最小值标记
            //jsonBuilder.Append("markPoint: {data:[{ type: 'max', name: '最大值'},{ type: 'min', name: '最小值'}]},");               
            //添加平均值虚线箭头
            //jsonBuilder.Append("markLine: { data: [{ type: 'average', name: '平均值'}]},");
            //是否显示详细值,里边还有个参数position: 'inside',详细参数放置位置,top,button等等一些
            jsonBuilder.Append("itemStyle : { normal: {label : {show: true,");
            //详细值的位置
            jsonBuilder.Append("position: 'right'");
            jsonBuilder.Append("}}},");
            //此行下边可继续添加item
    
            jsonBuilder.Append("}");
            jsonBuilder.Append("],");
            //添加xAxis:
            jsonBuilder.Append("xAxis:{axisLabel :{interval:0 },type: 'category',boundaryGap:true,data: [" + sbx.ToString() + "]},");
            //添加legend
            jsonBuilder.Append("legend: {y:'30',data:['" + legend + "']},");
            //添加toolbox://magicType: {show: true, type: ['line', 'bar']},柱状和折线图切换按钮不要,万一客户需要,然后又要让页面刷新还保持选择查看的状态就麻烦了
            jsonBuilder.Append("toolbox: {");
            jsonBuilder.Append(" show: true,feature: {dataZoom:{show: true,yAxisIndex: 'none'},dataView: { show: true,readOnly: false},restore: {show: true },saveAsImage: {show: true} }");
            jsonBuilder.Append("},");
    
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }
    
    2.一般处理程序
     public void ProcessRequest(HttpContext context)
        {
            try
            {
                string action = context.Request.Params["action"];
                switch (action.ToLower())
                {
                    case "getcharts": //获取数据总方法   
                        DateTime? startTime = null; DateTime? endTime = null;
                        if (context.Request.Params["startTime"] != null && context.Request.Params["startTime"].ToString() != "")
                            startTime = DateTime.Parse(context.Request.Params["startTime"].ToString());
                        if (context.Request.Params["endTime"] != null && context.Request.Params["endTime"].ToString() != "")
                            endTime = DateTime.Parse(context.Request.Params["endTime"].ToString());
                        strMsg = getCharts(context.Request.Params["toolId"], startTime, endTime);
                        break;
                    default:
                        break;
                }
                context.Response.Write(strMsg);
            }
            catch (Exception ex)
            {
    
            }
        }
    
        3.前台接收ashx抛出的字符串:           
            //根据条件查询要展示的数据
        function btnquery() {
            $.ajax({
                type: "get",
                url: "../../ashx/cnc/cncOverLoadAnalyse.ashx?action=getcharts&toolId=" + $("#tool").val() + "&startTime=" + $("#startTime").val() + "&endTime=" + $("#endTime").val() + "&t=" + Math.random(),
                timeout: 20000,
                cache: false,
                asycn: true,
                success: function (data) {
                    var myChart = echarts.init(document.getElementById('chartDiv'));
                    var option = eval('(' + data + ')');
                    myChart.setOption(option);
                },
                error: function (err) {
                    alert(err);
                }
            });
        }
    
                4.html页面预留chartDiv:
                 <div id="chartDiv" style="width:800px;height:600px;">
    
            5.注意引用js
              <script type="text/javascript" src="../../Echart/echarts-all.js"></script>
    
    点赞 评论 复制链接分享

相关推荐