Echarts的水平柱状图固定高度自适应问题

1 let myChart = echarts.init(document.getElementById('draw_probability'))
2 let autoHeight = 条数.length * 50 + 50  //条数长度
3 myChart.getDom().style.height = autoHeight + 'px'
4 myChart.resize() // 重要!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
import * as echarts from 'echarts'
function ChartOption({ label_list, data_list }) {
 let color = [
  'rgba(248,195,248',
  'rgba(100,255,249',
  'rgba(135,183,255',
  'rgba(248,195,248',
  'rgba(100,255,249',
 ]

 let lineY = []
 for (let i = 0; i < label_list.length; i++) {
  let x = i
  if (x > color.length - 1) {
   x = color.length - 1
  }
  let data = {
   name: label_list[i],
   color: color[x] + ')',
   value: data_list[i],
   itemStyle: {
    show: true,
    color: new echarts.graphic.LinearGradient(
     0,
     0,
     1,
     0,
     [
      {
       offset: 0,
       color: color[x] + ', 0.3)',
      },
      {
       offset: 1,
       color: color[x] + ', 1)',
      },
     ],
     false
    ),
    borderRadius: 10,
   },
  }
  lineY.push(data)
 }

 let option = {
  title: {
   show: false,
  },
  tooltip: {
   trigger: 'item',
   backgroundColor: '#606266',
   borderColor: '#606266',
   textStyle: {
    color: 'white',
   },
  },
  grid: {
   borderWidth: 0,
   top: 20,
   left: 0,
   right: 5,
   bottom: 10,
  },
  color: color,
  yAxis: [
   {
    type: 'category',
    inverse: true,
    axisTick: {
     show: false,
    },
    axisLine: {
     show: false,
    },
    axisLabel: {
     show: false,
     inside: false,
    },
    data: label_list,
   },
   {
    type: 'category',
    inverse: true,
    axisLine: {
     show: false,
    },
    axisTick: {
     show: false,
    },
    axisLabel: {
     show: true,
     inside: false,
     color: '#b3ccf8',
     fontSize: '14',
     fontFamily: 'PingFangSC-Regular',
     formatter: function(val) {
      return `${val}`
     },
    },
    splitArea: {
     show: false,
    },
    splitLine: {
     show: false,
    },
    data: data_list,
   },
  ],
  xAxis: {
   type: 'value',
   axisTick: {
    show: false,
   },
   axisLine: {
    show: false,
   },
   splitLine: {
    show: false,
   },
   axisLabel: {
    show: false,
   },
  },
  series: [
   {
    type: 'bar',
    zlevel: 2,
    barWidth: 15,
    data: lineY,
    label: {
     color: '#b3ccf8',
     show: true,
     position: [0, -20],
     fontSize: 14,
     formatter: function(a, b) {
      return `${a.name}\t${a.value}`
     },
    },
   },
  ],
  animationEasing: 'cubicOut',
 }

 return option
}

export default ChartOption

 

参考文章:https://www.cnblogs.com/cnsyear/p/12714359.html

posted @ 2020-12-02 16:21  yw3692582  阅读(2350)  评论(0编辑  收藏  举报