案例效果

柱状图自定义柱体宽度

实现思路

  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;
}

关键字,相关问题

  • 柱状图
  • 自定义配置项
最后编辑: 肖海杰  文档更新时间: 2024-03-05 11:49   作者:肖海杰