react-echarts柱状图坐标显示ToolTip

问题: 水平方向的柱状图大小受限,文字需要省略加tooltip提示

class demo extends React.component {
  constructor(props) {
    super(props);
    this.state = {};
    this.eRef = React.createRef();
  }
  // 添加事件监听
  eventListener  = {
    'mousemove': (e) => {
      this.eRef.current.getEchartsInstance().dispatchAction({  // 获取实例,并执行showTip
        type: 'showTip',
        name: e.value,
        seriesIndex: 0,
        position: [e.event.offsetX, e.event.offsetY]  
      })
    }
  }
  getOption = () => {
      return {
        tooltip: {
          trigger: 'axis'
        },
        series: {
          type: 'bar',
          data:  [], 
          barWidth: 8,
          itemStyle: {
            normal: {
            label: {
              show: true,
              position: 'left',
              color: '#5659E9',
              fontWeight:'900'
            },
           color: '#5659E9',
           borderRadius: 2,
         },
       }
      },
     xAxis: {
      type: 'value',
      data: this.props.data,
      axisLine: {
        show: true,
        lineStyle: {
          color: axisLine
        }
      },
      axisLabel: {
        color: axisLabel
      },
      nameTextStyle: {
        align: 'left'
      }
    },
    yAxis: {
      type: 'category',
      data: this.props.xData,
      triggerEvent: true,
      offset: 120, 
      axisLine: {
        lineStyle: {
          color: axisLine,
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: axisLabel,
        align:'left',
        width: 80,
        overflow:'truncate',
        interval: 0,
        inside: true,
      }
    },
    tooltip: {
      position:  (pos, params, dom, rect, size) => {
        // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
        const obj = {top: 60};
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 1)]] = 5;
        return obj;
      }
    }
    }  
  }
    render() {
    return (
      
    )
  }
}

你可能感兴趣的:(react-echarts柱状图坐标显示ToolTip)