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

完成!!!

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

相关推荐
blackorbird40 分钟前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者2 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v2 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls2 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#