设置yAxis.axisLabel.overflow:break为超宽换行
yAxis: [{type: 'category',inverse: true, //y轴坐标轴向下position: 'left', // 设置 y 轴的位置在左边offset: 65, // 设置 y 轴距离左边的偏移量axisLine: {show: false,},axisTick: {show: false},axisLabel: {show: true,interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。fontSize: 12,color: '#bbb',width: 130,overflow: 'break',//break 超宽换行 truncate 超宽显示...},data: yName,}],
配置rich解决行高问题
axisLabel: {show: true,interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。fontSize: 12,color: '#bbb',width: 130,overflow: 'break',//break 超宽换行 truncate 超宽显示...rich: {line: {lineHeight: 18}},formatter: function (value) {return `{line|${value}}`;}},
完整代码
<view style="width: 100vw;" v-show="!showEmpty"><l-echart :key="chartKey" ref="chart"></l-echart><view class="bottm-chart">我是有底线的</view></view>
async init(data, chartHeight) {this.$nextTick(() => {this.$refs.chart.init(echarts, chart => {let dataArr = [];let count = [];let yName = [];let showName = [];data.forEach((item, index) => {showName = item.entrustDealerName? item.entrustDealerName + '(' + item.showName + ')': item.showNameyName.push(showName);count.push(item.orderWeight);dataArr.push(Math.round(parseFloat(item.orderMoney) / 10000 * 100) / 100);})const newArr = count.map(item => item * -1)let option = {backgroundColor: '#fff',title: {// text: '销售额与销售量对比图',left: 20,textStyle: {fontSize: 16,fontWeight: 500,color: '#414957'},top: 12},// tooltip: {// trigger: 'axis',// axisPointer: { // 坐标轴指示器，坐标轴触发有效// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'// },// // triggerOn: 'mousemove',// backgroundColor: 'rgba(50,50,50,0.7)',// textStyle: {// color: '#fff'// },// // extraCssText: 'width:100px;height:100px;',// formatter: function (params) {// var title = '';// var str = '';// for (var i of params) {// title = i.name.replace(/\n/g, '') + '\n';// if (i.data == 'null' || i.data == null) {// str += i.seriesName + '：无数据' + '\n'// } else {// str += i.seriesName + '：' + Math.abs(i.data) + '\n'// }// }// return title + str.slice(0, -1);// },// },legend: {top: 20,right: 10,itemGap: 10,itemWidth: 10,itemHeight: 10,textStyle: {color: '#bbb'},data: ['销售量(吨)', '销售额(万元)']},color: ['#7291fd', '#44d39b'],grid: this.grid,xAxis: {show: false,},yAxis: [{type: 'category',inverse: true, //y轴坐标轴向下position: 'left', // 设置 y 轴的位置在左边offset: 65, // 设置 y 轴距离左边的偏移量axisLine: {show: false,},axisTick: {show: false},axisLabel: {show: true,interval: '0', //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签。fontSize: 12,color: '#bbb',width: 130,overflow: 'break',//break 超宽换行 truncate 超宽显示...rich: {line: {lineHeight: 18}},formatter: function (value) {return `{line|${value}}`;}},data: yName,}],series: [{name: '销售量(吨)',type: 'bar',// barMaxWidth: 12,barWidth: 12, // 条形的宽度barCategoryGap: '20%', // 同一类目下，同一系列的柱子间距stack: '总量',emphasis: {// focus: 'series'},label: {show: true,// position: 'inside',normal: {show: true,position: 'left',color: '#687284',fontSize: '10',formatter: function (params) {return (params.data * -1).toFixed(3);}},},data: newArr,}, {name: '销售额(万元)',type: 'bar',// barMaxWidth: 12,barWidth: 12,barCategoryGap: '20%', // 同一类目下，同一系列的柱子间距stack: '总量',emphasis: {// focus: 'series'},label: {normal: {show: true,position: 'right',color: '#687284',fontSize: '10',},},data: dataArr}]}chart.resize();chart.setOption(option);});this.setChartHeight(chartHeight)})},async getSaleStatistic(callback) {let data = {}this.showEmpty = truethis.loading = true;this.isloading = true;uni.showLoading({title: '加载中...',})try {let result = await getSaleStatistic(data);if (result.codeState == 0) {let data = {type: 'error',message: result.message,icon: '',}this.loading = false;this.isloading = false;uni.hideLoading()return this.showToast(data);}let chartHeight = 300;let baseGrid = { ...this.grid }if (result.data.length > 0) {this.showEmpty = falseif (result.data.length <= 4) {chartHeight = 300;// baseGrid.top = '70%'const top = 100 - 10 * (result.data.length + 1)baseGrid.top = top + '%'} else {chartHeight = result.data.length * 60;delete baseGrid.top;}this.grid = baseGrid/*grid: {// top: '60',left: '20%',right: '15%',bottom: '3%',containLabel: true,}*/} else {this.showEmpty = true}await this.init(result.data, chartHeight);this.show = false;this.loading = false;this.isloading = false;uni.hideLoading()} catch (e) {console.error('获取数据失败:', error)this.loading = false;this.isloading = falseuni.hideLoading()uni.showToast({title: '获取数据失败',icon: 'none'})}callback && callback()},async setChartHeight(chartHeight) {this.$refs.chart.resize({width: this.chartWidth,height: chartHeight,});this.$forceUpdate();},
