假设有个商品表，包含商品编号（主键），商品名和销量。最好是在下面的例子上改，求源码啊
<!DOCTYPE html>
说说我的做法:
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>