let expendChart = []//支出
let incomeChart = []//收入
let dateChart = []//时间
let difference = []//差值
if(res.length>0){
res[0].data.forEach(item => {
let expend = ""
if(item.tradeAmountZc>0){
expend = ~item.tradeAmountZc//转负数
}else{
expend = item.tradeAmountZc
}
expendChart.push(expend)
incomeChart.push(item.tradeAmountSl)
dateChart.push(item.zhouqi)
});
}
expendChart.forEach((item,index)=>{
difference[index] = Number(item) + Number(incomeChart[index])
})
var options = {
title: {
show:expendChart.length === 0 && incomeChart.length === 0,
textStyle: {
color: "grey",
fontSize: 20
},
text: "暂无数据",
left: "center",
top: "center"
},
tooltip: {
trigger: "axis",
},
legend: {
icon: "roundRect", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,
left: "2%",
itemHeight: 4,
itemWidth: 14,
data: ["收入", "支出"]
},
xAxis: [
{
type: "category",
data: dateChart,
axisPointer: {
type: "shadow"
},
axisLine: {
//y轴
show: false
},
// 刻度线
axisTick: {
show: false
},
//网格线
splitLine: {
show: false
}
}
],
yAxis: [
{
type: "value",
axisTick: {
//y轴刻度线
show: false
},
},
{
type: "value",
axisLine: {
//y轴
show: false
},
axisTick: {
//y轴刻度线
show: false
},
splitLine: {
//网格线
show: false
}
}
],
series: [
{
type: "bar",
barWidth: 12,
},
{
name: "收入",
type: "line",
data: incomeChart,
color: "#F56B6B",
},
{
name: "支出",
type: "line",
data: expendChart,
color: "#1890FF",
}
]
}
//初始化ECharts
chart.echartsInit(options)
var options = {
series: [{ data:difference.map(item=>{
return {
value:item,
itemStyle:{
normal:{
barBorderRadius:item >0?[6, 6, 0, 0]:[ 0, 0,6,6],
color:item > 0 ? "#F56B6B" : "#1890FF"
}
}
}
}),}]
}
//更新图表数据
chart.echartsOptions(options)
}
echart-两条折线图-柱状图差值
最新推荐文章于 2024-01-24 11:14:01 发布