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