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]
    }
  ]
};
相关推荐
橙子1991101639 分钟前
谈谈 Kotlin 中的构造方法,有哪些注意事项?
java·前端·kotlin
*neverGiveUp*1 小时前
本地分支git push 报错 fatal: The current branch XXXX has no upstream branch.
前端·git·gitea
AaronZZH1 小时前
为什么现代CSS应该选择OKLCH:从颜色科学到设计系统革新
前端·css
CaseyWei2 小时前
JS实现直接下载PDF文件
前端·javascript
pianmian12 小时前
3dczml时间动态图型场景
前端·javascript·数据库
编程大全2 小时前
45道工程模块化高频题整理(附答案背诵版)
前端·工程化
好奇的菜鸟2 小时前
如何升级 npm:从版本管理到最佳实践
前端·npm·node.js
伊成2 小时前
扫盲笔记之NPM
前端·笔记·npm
飞飞9873 小时前
spring mvc
java·服务器·前端
sql123456789113 小时前
Vue-js
前端·javascript·vue.js