echarts双向柱状图

 let  
option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: "#0000005c",
          borderColor: "#6FD0FF",
          borderWidth: 1,
          padding: [2, 10],
          textStyle: {
            color: "#6FD0FF",
            fontSize: 12,
            fontWeight: 600,
            align:'left'
          },
          formatter:function (params) {
            return `
                    <div>${params[0].axisValue}</div>
                    <div style="width:100px;display: flex;justify-content: space-between">
                      <div>${params[0].marker}${params[0].seriesName}</div>
                      <div>${params[0].value}个</div>
                    </div>
                    <div style="width: 100%;display: flex;justify-content: space-between">
                      <div>${params[1].marker}${params[1].seriesName}</div>
                      <div>${-(params[1].value)}个</div>
                    </div>
                    <div style="width: 100%;display: flex;justify-content: space-between">
                      <div>${params[2].marker}${params[2].seriesName}</div>
                      <div>${Math.abs(params[2].value)}个</div>
                    </div>
            `
          }
        },
        legend: {
          top: "6%",
          data: ['发现', '处置完成', '未处置'],
          textStyle: {
            color: "#FFFFFF"
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              color: "#89C3FF",
              fontSize:15,
              fontWeight:400,
              formatter: function (value, index) {
                if(value<0){
                  return Math.abs(value);
                }else {
                  return value;
                }
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#154982",
                width: 3
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              color: "#89C3FF",
              fontSize:15,
              fontWeight:400,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#154982",
                width: 3
              }
            },
            data:['周一','周二','周三','周四']
          }
        ],
        series: [
          {
            name: '未处置',
            type: 'bar',
            barWidth:15,
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7A9BFF' },
                { offset: 1, color: '#2647AC' }
              ])
            },
            data:  [100,100,100,100]
          },
          {
            name: '发现',
            type: 'bar',
            stack: 'Total',
            barWidth:15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#88E84D' },
                { offset: 1, color: '#01750F' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [-100,-100,-100,-100]
          },
          {
            name: '处置完成',
            type: 'bar',
            stack: 'Total',
            barWidth:15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFD853' },
                { offset: 1, color: '#B15C00' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [100,100,100,100]
          }
        ]
      };


在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言只 石皮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值