echarts定制化柱状图——条纹柱状图

简单记录下echarts定制化柱状图的开发,省的以后还要去翻配置项,以下代码echarts官网均可直接运行

javascript 复制代码
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'pictorialBar',
      symbol:'rect',
      symbolMargin:'2',
      symbolSize:[30,5],
      symbolRepeat:true,
      barWidth:42,
      symbolClip:true
      
    },
    {
      color:'transparent',
      type:'bar',
       barWidth:46,
      barGap:'-100%',
      itemStyle:{
        borderColor:'green'
      },
      data:[130, 210, 160, 90, 80, 120, 140]
    }
  ]
};
相关推荐
一枚前端小能手11 小时前
🛠️ Service Worker API深度解析 - 生命周期、缓存与离线实战
前端·javascript
马卫斌 前端工程师11 小时前
vue3 实现echarts 3D 地图
前端·javascript·echarts
蓝瑟11 小时前
前端测试不再难:Vite+React+Vitest单元测试完整手册
前端·react.js·单元测试
爱分享的鱼鱼11 小时前
Vue中如何实现可切换显示/隐藏侧边栏的按钮
前端
Mike_jia11 小时前
DBdoctor:数据库性能的“AI名医”,诊断效率提升10倍的终极利器
前端
怪可爱的地球人11 小时前
向宇宙发送一枚小可爱
前端
数字元匠_山步11 小时前
一篇笔记彻底搞懂 “脚手架” “框架” “构建工具” 的关系
前端
李剑一12 小时前
前端实现时间轴组件拼接N多个不连续监控视频展示
前端·vue.js
岁月向前12 小时前
iOS UI基础和内存管理相关
前端
Magicman12 小时前
JS筑基(二)-关于this指向
前端