echarts 柱状图

发布于:2022-07-26 ⋅ 阅读:(277) ⋅ 点赞:(0)

代码

picture2Option:{
     grid: {
       top: "5px",
       left: "5px",
       right: "5px",
       bottom: "5px",
       containLabel: true,
     },
     xAxis: {
       type: 'category',
       data: ['困人报警','卡层报警','开门运行','超速报警','重复开关门','上极限报警','下极限报警','停梯不关门','停梯不开门'],
       axisLabel: {
         color: "#ccc",   //x轴字体颜色
         interval:0,
         rotate:30
       },
       axisTick: {
         alignWithLabel: true
       },
       axisLine: {
         lineStyle: {
           color: "#ccc",   //x轴线条颜色
         },
       },
     },
     axisLabel: {
       color: "#ccc",   //y轴字体颜色
     },
     yAxis: {
       type: 'value',
       minInterval: 1,
       axisLine: {
         lineStyle: {
           color: "#ccc",  //y轴字体颜色
         },
       },
       splitLine: {
         show: false,   //区域内部的x轴平行线
       },
     },
     series:{
       data: [21,66,31,73,92,36,55,73,56],
       type: 'bar',
       barWidth : 20, //柱图宽度
       color:'#f77200', //柱体颜色
       itemStyle:{
         normal: {
           label: {
             show: true, //开启显示
             position: 'top', //在上方显示
             textStyle: { //数值样式
               color: '#fff',
               fontSize: 12
             },
             color:'#f77200',
           }
         },
       },
     }
   },

效果
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到