echarts柱形图倒立,上下都是正数(2)

//在建项目分布柱状图2
proHoursBar2Option = {
    title: {
        // text: '材价频率分布图',
        x: 15,
        y: 15,
        textStyle: {  //标题文字设置
            fontSize: '12',
            fontWeight: 'normal',
            color: '#666'
        }
    },
    tooltip: {
        trigger: 'item',
        padding: 10,
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter:function(data){
            return data.name +':'+Math.abs(data.value);   //负数取绝对值变正数
        }
    },
    grid: {    //整体图表偏移
        x: 45,
        x2: 40,
        y: 60,
        y2: 40,
        borderWidth: '0'
    },
    xAxis: [{
        type: 'category',
        // name: '价格',
        // nameTextStyle: {   //x轴标题设置
        //     color: '#999'
        // },
        splitLine: false,   //网格线
        axisLabel: {   //坐标轴文字设置
            textStyle: {
                color: '#333'
            }
        },
        axisTick: {   //刻度
            show: false
        },
        axisLine: {  //坐标轴线
            textStyle: {
                color: '#666'
            },
            lineStyle: {
                width: 2,
                color: '#f44550'
            }
        },
        data: ['自研','客户']
    }],
    yAxis: [{
        type: 'value',
        show:false,
        name: '工时',
        nameTextStyle: {  //x轴标题设置
            color: '#999'
        },
        splitLine: {  //网格线
            show:false,
            lineStyle: {
                color: ['#E0EBFF'],
                width: 1
            }
        },
        axisLine: {  //坐标轴线
            show:false,
            lineStyle: {
                width: 2,
                color: '#76AFF4'
            }
        },
        axisLabel: {  //坐标轴文字设置
            show:false,
            textStyle: {
                color: '#999'
            }
        },
        axisTick: {  //刻度
            show: false
        }
    }],
    series: [{
        name: '工时',
        type: 'bar',
        itemStyle: {
            normal: {
                barBorderRadius: [2, 2, 2, 2],  //柱子圆角
                barBorderColor: 'rgba(0,0,0,0)',  //柱子圆角颜色
                areaStyle: {
                    type: 'default'
                },
                color: '#856231',
                label : {  //数值展示
                    show: true,
                    position: 'insideTop',  //数值显示在柱子内
                    formatter:function(data){
                        if (data.value<0) {
                            return Math.abs(data.value);
                        }
                    }
                }
            },
            emphasis: {
                barBorderRadius: [2, 2, 2, 2]  //圆角
            }
        },
        barWidth: 30,  //柱子宽度
        data: [-3, -2]
    }]
};
附图:
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值