echart 柱状图加短线

发布时间 2023-07-06 16:11:01作者: 7c89

let data=[51, 58, 63, 57, 63, 40, 124,108, 63, 63]
          let max=Math.max.apply(null,data)*0.03
          let linedata=Array(data.length).fill(max)
          this.options = {
            grid: {
              left: 20,
              right: 20,
              bottom: "10",
              top: "18%",
              containLabel: true,
            },
            tooltip: {},
        xAxis: [
              /*横坐标*/
              {
                  axisTick: {show: false},
                  type: 'category',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: "white",
                    },
                  },

                  data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              /*隐藏一个不显示的横坐标,用作横线的位置*/
              {
                  type: 'category',
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      show: false
                  },
                  splitArea: {
                      show: false
                  },
                  splitLine: {
                      show: false
                  },
                  data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
              },
          ],
        yAxis: [
                  {
                    axisTick: {
                      show: false
                    },
                    splitLine: {
                      lineStyle:{
                        type:'dashed'//虚线
                    },
                    show: true //隐藏
                  },
                    type: "value",
                    name: '次',
                    // interval: 25,
                    splitNumber: 4, // 坐标轴的分割段数
                    axisLine: {
                      show: false,
                      lineStyle: {
                        color: "white",
                      },
                    },
                  }
            ],
        series: [
            {
              type: 'bar',
              barWidth:'30%',
              itemStyle: {
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top',
                    // formatter: '{c}%',
                        textStyle: { //数值样式
                            color: "#FFFFFF",
                            // fontSize: 16,
                            // fontWeight: 600
                        }
                    },
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: '#1595fb'
                    }, {
                        offset: 1,
                        color: '#21346c'

                    }]),
                    // barBorderRadius:15

                }
            },
              data: data,
            },
            {
              /* 这个bar是撑起横线的高度,并设置透明*/
              // name: "盈亏平衡点",
              stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
              type: 'bar',
              xAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)'/* 设置bar为隐藏,撑起下面横线*/
                }
              },
              data: data,
            },
            {
              /* 这个bar是横线的显示*/
              // name: "盈亏平衡点",
              stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
              type: 'bar',
              barWidth:'30%',
              xAxisIndex: 1,
              barGap: '0',
              itemStyle: {
                normal: {
                  color: '#159aff'

                }
              },
              data:linedata
            }
          ]
          }