.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;
}