vue 间隔柱状图

最新推荐文章于 2024-07-19 10:30:06 发布

新宇最优秀

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量337

点赞数 1

文章标签： Echarts 柱状图数据可视化图表配置前端开发

本文链接：https://blog.csdn.net/tendernessxy/article/details/117323781

版权

实现效果：
在这里插入图片描述
实现代码：
数据代码：

const intervaColumnOption = {
  backgroundColor: 'transparent',
  grid: {
    top: 20,
    bottom: 30,
    left: 10,
    right: 50,
    containLabel: true
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value',
    name: '万元',
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    position: 'top',
    nameTextStyle: {
      color: '#fff'
    }
  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(255,255,255,0.85)',
        fontSize: 14
      },
      // 文字过长 超出5个字显示省略号
      formatter: function(value) {
        if (value.length > 5) {
          return value.substring(0, 5) + '...'
        } else {
          return value
        }
      }
    }
  },
  series: [
    {
      type: 'bar',
      barGap: '-100%',
      barMaxWidth: 10,
      z: 0,
      label: {
        normal: {
          show: false,
          position: 'right',
          fontSize: 14,
          color: '#36B5FF',
          offset: [10, 0]
        }
      },
      data: []
    },
    {
      type: 'bar',
      barGap: '-100%',
      barMaxWidth: 10,
      label: {
        normal: {
          show: true,
          position: 'right',
          fontSize: 14,
          color: '#fff',
          offset: [10, 0],
          formatter(params) {
            return params.data.label
          }
        }
      },
      tooltip: {
        show: false
      },
      data: []
    },
    {
      type: 'pictorialBar',
      symbolRepeat: 'fixed',
      symbolMargin: 4,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [1, 14],
      symbolPosition: 'start',
      itemStyle: {
        color: 'rgba(0,0,0,1)'
      },
      data: []
    }
  ]
}
export default intervaColumnOption