.net core echartsjs 折线图加柱状图

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

        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值