.net core echartsjs 折线图加柱状图 单柱
源网址 https://gallery.echartsjs.com/editor.html?c=xSJJXiE1Wx js
function Barchart(where) { ///费用支出走势图 $.ajax({ type: 'Post', url: '/Reimburse/Barchart/', dataType: "json", headers: { "X-CSRF-TOKEN-zhuchengkai": $("input[name='AntiforgeryKey_zhuchengkai']").val() }, data: where, success: function (res) { //ExpensesBar是DIV ID var amountChart = echarts.init(document.getElementById('ExpensesBar')); optionAmount = { backgroundColor: "", "title": { "text": "报销统计", "subtext": "当前仅统计审核通过的数据",//tips x: "4%", top: '2%', textStyle: { color: '#FF0000', fontSize: '22' }, subtextStyle: { color: '#000000', fontSize: '16', }, }, "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow", textStyle: { color: "#FF0000" } }, }, "grid": { "borderWidth": 0, "top": 110, "bottom": 95, textStyle: { color: "#000000" } }, "legend": { x: '4%', top: '18%', textStyle: { color: '#000000', }, "data": ['报销金额'] }, "calculable": true, "xAxis": [{ "type": "category", "axisLine": { lineStyle: { color: '#000000' } }, "splitLine": { "show": false }, "axisTick": { "show": false }, "splitArea": { "show": false }, "axisLabel": { "interval": 0, }, "data": res.mouths.split(","), }], "yAxis": [{ "type": "value", "splitLine": { "show": false }, "axisLine": { lineStyle: { color: '#000000' } }, "axisTick": { "show": false }, "axisLabel": { "interval": 0, }, "splitArea": { "show": false }, }], "series": [ { "name": "报销金额", "type": "bar", "stack": "总量", "itemStyle": { "normal": { "color": "rgba(0,191,183,1)", "barBorderRadius": 0, "label": { "show": true, "position": "inside", formatter: function (p) { return p.value > 0 ? (p.value) : ''; } } } }, "data": res.TotalAmount.split(",") }, { "name": "总数", "type": "line", symbolSize: 10, symbol: 'circle', "itemStyle": { "normal": { "color": "rgba(0,0,128)", "barBorderRadius": 0, "label": { "show": true, "position": "top", formatter: function (p) { return p.value > 0 ? (p.value) : ''; } } } }, "data": res.TotalAmount.split(",") }, ] } amountChart.setOption(optionAmount); }, error: function (XMLHttpRequest, textStatus, errorThrown) { layer.alert('操作失败！！！' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus, { icon: 5 }); } }); } 后端 ```csharp //控制器代码 /// <summary> /// 柱状图 /// </summary> /// <param name="InputModel"></param> /// <returns></returns> [HttpPost] public async Task<string> Barchart(IndexInput InputModel) { List<BarchartOut> result = await _ManageService.Barchart(InputModel); string mouths = ""; string TotalAmount = ""; for (int i = 0; i < result.Count; i++) { mouths += result[i].Months; if (i != result.Count-1) { mouths += ","; } if (result[i].TotalAmount==null) { TotalAmount += "0"; } else { TotalAmount += result[i].TotalAmount.ToString(); } if (i != result.Count - 1) { TotalAmount += ","; } } var obj = new { mouths= mouths, TotalAmount= TotalAmount, }; return JsonHelper.ObjectToJSON(obj); } //dal层 public async Task<List<BarchartOut>> Barchart(string sqlwhere) { string sql = $@"select sum(reimbursemanage.Amount) as TotalAmount,reimbursemanage.Times as Months from (select date_format(reimbursemanage.SubmitTime,'%Y-%m') as Times,reimbursemanage.Amount,reimbursemanage.ProjectId from reimbursemanage where reimbursemanage.IsDelect!=1 and reimbursemanage.State=2 {sqlwhere}) as reimbursemanage GROUP BY reimbursemanage.Times"; List<BarchartOut> barchartOuts = (await _dbConnection.QueryAsync<BarchartOut>(sql)).ToList(); return barchartOuts; }