柱状图自定义柱体宽度

案例效果

柱状图自定义柱体宽度

实现思路

1. 配置一个柱状图

2. 点击‘样式’，启用自定义配置项

3. 编写js实现

操作步骤

1. 配置一个柱状图

2. 点击‘样式’，启用自定义配置项
   

3. 点击【配置项】按钮，编写js实现

相关代码

/*
     option 处理好的EChart配置项，可以自行修改
     panel 图表panel
     cfg 图表的原始配置
*/
function(option,panel,cfg){
    option.series[1].barMaxWidth = 400;
    option.series[1].barWidth = 400;
     return option;
}

/*
设置柱体lable数字格式
*/
function(option,panel,cfg){
    option.series[1].label = {
        show: true,
        position: 'top',
        normal:{
              formatter:val => {
                return val.value+'%';
              },
              show:true,
              position: 'top', //定位
              textStyle:{
                fontSize:10,
                color:'#06d4e4'
              }
            }
      };
    return option;
}

关键字，相关问题

• 柱状图
• 自定义配置项