echarts 柱状图 + 假边框

最新推荐文章于 2023-06-27 14:15:44 发布

Koreyoshi·

最新推荐文章于 2023-06-27 14:15:44 发布

阅读量1.2k

点赞数

分类专栏： echarts 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/125621765

版权

echarts 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

#### 记录自己写过的echarts图表（柱状图边框）

// 渐变柱状图的颜色
const offsetColor0 = ['rgba(79,216,255, 1)', 'rgba(0,120,248, 1)', 'rgba(100,95,164, 1)', 'rgba(0,206,184, 1)', 'rgba(69,199,204, 1)']
const offsetColor1 = ['rgba(79,216,255, 0.1)', 'rgba(0,120,248, .1)', 'rgba(100,95,164, .1)', 'rgba(0,206,184, .1)', 'rgba(69,199,204, .1)']
const series1 = {
  name: '',
  type: 'bar',
  barWidth: 30,
  label: {
    show: false
  },
  itemStyle: {
    normal: {
      color: (params) => {
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: offsetColor0[params.dataIndex]
          },
          {
            offset: 1,
            color: offsetColor1[params.dataIndex]
          }
        ])
      }
    }
  },
  data: this.value[0]
}
const yFormatterUnit = '%' // Y轴单位
const series2 = {
  name: '',
  type: 'bar',
  barWidth: 40,
  barGap: '-116%',
  z: -1,
  label: {
    show: true,
    position: 'top',
    color: '#D7E9EE',
    formatter: (params) => {
      const data = this.value[0][params.dataIndex] || this.value[0][params.dataIndex] === 0 ? this.value[0][params.dataIndex] + yFormatterUnit : ''
      return data
    }
  },
  itemStyle: {
    color: 'rgba(5,43,66,0.3)',
    borderColor: 'rgba(36,147,199,0.3)',
    borderWidth: 1
  },
  data: this.value[1]
}