echart-两条折线图-柱状图差值

 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)
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值