echarts——柱状图,Y轴不显示,series内容展示在Y轴附近——基础积累

echarts柱状图美化效果------基础积累

最近看到同事在做下面效果的柱状图,效果图如下:

最常见的柱状图如下:

1.竖向柱状图------改为横向柱状图

需要将xAxis中的type:'category'改到yAxis中的type中

也就是说哪个轴的type是category,哪个轴就是主轴,X轴是主轴则柱状图是竖向的,Y轴是主轴则柱状图是横向的。

2.隐藏Y轴------yAxis中的show设置为false,则y轴不展示

yAxis: { type: 'category',show:false},

3.将series中的标题添加到Y轴附近------需要设置以下参数

js 复制代码
align: 'left',
padding: [0, 0, 0, 20],
position: 'left',

3.1 如果不加以上三个参数的效果:

3.2 添加了align:'left'参数的效果

3.3 添加了padding: [0, 0, 0, 20]参数的效果

3.4 添加了position: 'left'参数的效果

4.柱状图不同颜色的设置

如果是多个柱子的不同颜色,可以在series同一级别中添加color:[颜色1,颜色2,颜色3]的颜色集合数组

现在是同一个series对象中柱子设置不同颜色,则需要在series里面的itemStyle中的color去设置

具体代码如下:

js 复制代码
{
  type: 'bar',
  itemStyle: {
    normal: {
      color:(val)=>{
        let cols = ['#289ee1','#6ad89d','#f8d36c','#f46868','#6f65bc','#76d7f4'];
        return cols[val.dataIndex%6];//这段代码就是设置了6个基本颜色,然后根据柱子的索引不同,设置不同颜色
      },
      //这部分让指标提示显示在上方
      label: {
        formatter: (val) => {
          return val.data[2];
        },
        color:'#000',
        show: true,
        align: 'left',
        padding: [0, 0, 0, 20],
        position: 'left',
        fontSize:16,
      }
    }
  }
}

完成!!!

多多积累,多多收获。感谢大家的支持。

相关推荐
专注前端30年27 分钟前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js39 分钟前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
文火冰糖的硅基工坊1 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088501 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili1 小时前
用 Tinymce 打造智能写作
前端
angelQ1 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla2 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办2 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao2 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
云中雾丽2 小时前
React.forwardRef 实战代码示例
前端