echart案例之横向多数据柱状图(含属性详解）

一、此案例基于Vue3+ts，效果展示：

二、单个属性的值：

1、grid 整个图表的位置

grid.containLabel  是否包含标签

1.简单来说如果是false,到底部的距离是从坐标轴线开始计算的

2.如果是true,到底部的距离就是从坐标文字底部开始计算

2、legend 图例

legend.orient 图例的朝向

1.vertical 垂直显示

2.horizontal 水平显示

legend.x/y 设置图例在X轴方向上的位置以及在Y轴方向上的位置

x：默认left，所有取值范围：left/center/right

y：默认top，所有取值范围：top/center/bottom

legend.itemGap 间隔数值

3、xAxis/yAxis x/y轴相关样式

splitLine.lineStyle.type 设置背景线条的类型

1.dashed 虚线

2.solid 实线

axisTick 刻度线相关样式

show：false/true 是否隐藏刻度线

inside：false/true 刻度线指向内部还是外部

axisLine 轴线相关样式

axisLabel 坐标文字相关样式

formatter: '{value} % ' 自定义文字内容,添加单位等

4、series 数据

itemStyle 柱体样式

1.单个柱体文字显示样式

  label: {

            show: false, // 是否显示

            position: 'right', // 显示的位置

          }

2.柱体设置渐变颜色,单色直接写色值即可

  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [

            {

              offset: 0,

              color: 'rgba(255, 176, 52, 1)',

            },

            {

              offset: 1,

              color: 'rgba(93, 78, 52, 0.01)',

            },

          ]),

三、完整代码如下：