echarts 柱状图横坐标文字纵向展示(超出显示...)

echarts 柱状图横坐标文字纵向展示(超出显示…)

用到方法：

value.split("")

话不多说,上代码：

import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import _ from 'lodash';
import { INIT_DATA } from '../initData';
import styles from './index.less';
export default class OsChart extends Component {constructor(props) {super(props);this.state = {};}getOsChartOption = () => {const { dataSource } = this.props;let xAxisData = _.keys(dataSource).sort((a, b) => { return dataSource[b] - dataSource[a] });let series = [];for (let i = 0; i < xAxisData.length; i++) {series.push([xAxisData[i], dataSource[xAxisData[i]]]);}let option = {// color: ['#16aaff', '#0ca7ff'],color: ['#16aaff'],tooltip: {trigger: 'axis',// formatter: '{b}: {c}',},grid: {//设置图表撑满整个画布top: '35px',left: '30px',right: '70px',bottom: '15px',containLabel: true,},xAxis: [{type: 'category',// name: INIT_DATA.SearchParams[2],   // 名称data: xAxisData,axisLabel: {show: true,// interval: 0,textStyle: {fontSize: 12,},formatter: function (value) {//x轴的文字改为竖版显示var str = value.split("");return str.slice(0, 4).join("\n") +  (str.length > 4 ? '\n...' : '');},// rotate: -90,},},],yAxis: {splitLine: {show: true,},type: 'value',name: INIT_DATA.AxisName[1], // 名称min: 0,},series: [{data: series,type: 'bar',// itemStyle: {// normal: {//   color: function (params) {//     let colors = ['#0ca7ff', '#00e1d9'];//     let x = params.dataIndex % 2 === 0 ? 1 : 2;//     if (x === 1) {//       return colors[0];//     } else {//       return colors[1];//     }//   },// },// },},],};return option;};render() {return (<ReactEchartsclassName={styles.contentLayout}option={this.getOsChartOption()}notMerge={true}theme="theme"/>);}
}

效果

echarts 柱状图横坐标文字纵向展示(超出显示...)相关推荐

使用echarts柱状图横坐标文字过长放不下，文字会被隐藏
今天在使用echarts中使用了柱状图,因为横坐标的文字过长,导致了显示不全,便去百度学习了一番总结下. 1.可以设置字体倾斜实现效果(我用的就是这个)上图这是在xAxis: 中加入了 axisLa ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
echart 柱状图横坐标文字过长，如何旋转
echart 柱状图横坐标文字过长,如何旋转有时候,在用柱状图表的时候,如果横坐标文字过长,某些文字就会消失不显示,我们可以将其旋转一下,调整到合适的角度,就能正常显示横坐标文字了. 比如下面这样, ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
vue——echarts柱状图横轴文字太多放不下【处理办法】
1. 如果单纯是文字太多,且中间无法分割开的话,可以采用两种方式: 文字倾斜展示效果: 在options配置中的xAxis中配置如下代码: axisLabel: {interval: 0,rotat ...
Echarts柱状图(顶部和内部的数值显示)/(内部数值的百分比计算)/(顶部显示多行数据)/(柱体圆角)
先看效果: 如何实现顶部和内部的数值显示并且计算出两个柱状图的百分比: 首先是全部源码: <div ref="country" id="country" ...
禁止选择文字和文本超出显示省略号
禁止选中文字用来防止用户选中页面上的文字的css样式 uesr-select:none; -webkit-user-select:none -moz-uesr-select:none; -ms-ue ...
echarts图标的文字(label)动态切换显示隐藏
功能描述如图,没有背景色的柱子(后面简称 "差值柱" ),差值柱本身是不显示 label 的,图中差值柱上方的 label 实际是紫柱的 label. 这个紫柱上方显示和绿柱相比 ...
echarts柱状图标记异常数据，突出显示异常数据柱子
近日开发中,项目要求展示一个月的数据,但一个月中有异常的数据需要标记显示并显示出数据解决方案:增加柱状图,传入的是异常日期数据(为了标记突出,我传入的数据为异常数据*2,不异常的传入"-& ...

echarts 柱状图横坐标文字纵向展示(超出显示...)

echarts 柱状图横坐标文字纵向展示(超出显示…)

效果

echarts 柱状图横坐标文字纵向展示(超出显示...)相关推荐

最新文章

热门文章

echarts 柱状图 横坐标文字纵向展示(超出显示...)

echarts 柱状图 横坐标文字纵向展示(超出显示…)

效果

echarts 柱状图 横坐标文字纵向展示(超出显示...)相关推荐

最新文章

热门文章

echarts 柱状图横坐标文字纵向展示(超出显示...)

echarts 柱状图横坐标文字纵向展示(超出显示…)

echarts 柱状图横坐标文字纵向展示(超出显示...)相关推荐