echarts柱状图根据正负值动态设置颜色和圆角

341 阅读1分钟
series: [{
  name: '同比增长',
  type: 'bar',
  barWidth: '23px',
  emphasis: { disabled: true // 禁用点击柱状图时会隐藏不见 },
  data: this.orgDatas.map(item => {
     return {
        value: item,
        label: {
          show: true,
          formatter: '{c}%',
          fontSize: 10,
          color: '#fff',
          position: 'inside',
          textBorderColor: '#5C7DBD',
          textBorderWidth: 1
       },
       itemStyle: {
         barBorderRadius: item > 0 ? [10, 10, 0, 0] : [0, 0, 10, 10],
         color: item > 0 ? new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: '#67D6F2' },
           { offset: 1, color: '#0B69FF' }
         ]) : new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
           { offset: 0, color: '#0B69FF' },
           { offset: 1, color: '#67D6F2' }
         ])
       }
   }
  })
}]