echarts——柱状图设置——技能提升

你的名字 2022-09-10 13:11 548阅读 0赞

今天做了一个柱状图，是通过echarts来处理的。

效果图如下所示：
在这里插入图片描述
查看上面的效果图：可以看出有几个需要设置的部分

1. y轴上方有个单位：个,这个可以通过y轴设置参数中添加一个name来实现，还有位置设置

2. x轴和y轴的刻度线隐藏，坐标轴颜色和文字颜色设置，柱状图区域背景线为虚线

3. 柱状图形有圆角，且两个柱子之间有间距

下面分别详细记录一下：

1. y轴上方有个单位：个,这个可以通过y轴设置参数中添加一个name来实现，还有位置设置

  1. yAxis: { 
  2.    type: 'value',
  3.    name: '单位：个',
  4.    nameTextStyle: { 
  5.        color: "#1A1A1A",
  6.        padding:[0,-60,0,0],
  7.    },
  8.    axisLabel: { 
  9.        textStyle: { 
  10.            color: '#999999'
  11.        }
  12.    },
  13.    axisLine: { 
  14.        lineStyle: { 
  15.            type: 'solid',
  16.            color: '#CCCCCC'
  17.        }
  18.    },
  19.    axisTick: { 
  20.        show: false
  21.    },
  22.    splitLine: { 
  23.        show: true,
  24.        lineStyle: { 
  25.            type:'dashed'
  26.        }
  27.    }
  28. },

上面代码中的name就是单位，nameTextStyle可以设置name的颜色和位置。padding有四个参数，可以测试一下，就知道该用哪几个参数了

  1. name: '单位：个',
  2. nameTextStyle: { 
  3.     color: "#1A1A1A",
  4.     padding:[0,-60,0,0],
  5. },

2. x轴和y轴的刻度线隐藏，坐标轴颜色和文字颜色设置

以y轴为例

  1. yAxis: { 
  2.    type: 'value',
  3.    name: '单位：个',
  4.    nameTextStyle: { 
  5.        color: "#1A1A1A",
  6.        padding:[0,-60,0,0],
  7.    },
  8.    axisLabel: { 
  9.        textStyle: { 
  10.            color: '#999999'
  11.        }
  12.    },
  13.    axisLine: { 
  14.        lineStyle: { 
  15.            type: 'solid',
  16.            color: '#CCCCCC'
  17.        }
  18.    },
  19.    axisTick: { 
  20.        show: false
  21.    },
  22.    splitLine: { 
  23.        show: true,
  24.        lineStyle: { 
  25.            type:'dashed'
  26.        }
  27.    }
  28. },

坐标轴文字设置

  1. axisLabel: { 
  2.     textStyle: { 
  3.         color: '#999999'
  4.     }
  5. },

坐标轴线设置

  1. axisLine: { 
  2.     lineStyle: { 
  3.         type: 'solid',
  4.         color: '#CCCCCC'
  5.     }
  6. },

坐标轴刻度线设置

  1. axisTick: { 
  2.     show: false,//隐藏，不显示
  3. },

设置柱状图区域背景为虚线

  1. splitLine: { 
  2.     show: true,
  3.     lineStyle: { 
  4.         type:'dashed'
  5.     }
  6. }

3.柱状图形有圆角，且两个柱子之间有间距

  1. series:[{ 
  2.     data: [120, 700, 150, 480, 70, 110, 130],
  3.     type: 'bar',
  4.     barGap:0.5,
  5.     label: { 
  6.         normal: { 
  7.             show: true,
  8.             position:'top',
  9.             formatter:'{c}'
  10.         }
  11.     },
  12.     barWidth: 12,
  13.     itemStyle: { 
  14.         normal: { 
  15.             barBorderRadius: [6],
  16.         }
  17.     }
  18. }]

展示数值

  1. label: { 
  2.     normal: { 
  3.         show: true,
  4.         position:'top',
  5.         formatter:'{c}'
  6.     }
  7. },

设置柱子的宽度

  1. barWidth: 12,

设置柱子圆角

  1. itemStyle: { 
  2.     normal: { 
  3.         barBorderRadius: [6],
  4.     }
  5. }

设置两个柱子之间的间距

  1. barGap:0.5,

发表评论

表情：
评论列表 （有 0 条评论，548人围观）

还没有评论，来说两句吧...

相关阅读