标签：style let .... chart ECharts xAxisTip params 移上 event

1.首先在option中设置triggerEvent为true：

let format = (e) => {
 	return e.substr(0, 4) + '...';
}
xAxis: {
  axisLabel: {
    interval: 0,
    rotate: 40,
    formatter: format,
    color: '#333'
  },
  data: nameArr,
  triggerEvent: true,// 设置为true后具有x轴文字过长，显示省略号，hover上去显示全部的功能
},

2.在echarts中引入hover样式div：

<div>
    <div ref={container => { this.container = container; }} className={"container " + (this.props.className || '')}/>
    <div className="x-axis-tip"></div>
</div>

3. 写入x-axis-tip样式(字符过长可换行)：

.x-axis-tip {
  display: none;
  position: absolute;
  padding: 5px 5px;
  font-size: 12px;
  line-height: 18px;
  color: #575757;
  background: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
  border-radius: 4px;
  max-width: 280px;
  white-space: normal;
  word-break: break-all;
 }

4.在echarts初始化后传入事件：

if (!this.chart) {
    this.chart = e.init(this.container);
    if (this.props.bindEvents) {
      this.props.bindEvents(this.chart); //绑定点击事件
    }
    if (this.props.bindTriggerEvent) {
      this.props.bindTriggerEvent(this.chart); //绑定x轴文字hover事件
    }
}

5.页面组件调用

<ECharts
   options={getChartsOptionsForLine(barData)}
   bindEvents={c => { this.bindChartEvents(c) }}
   bindTriggerEvent={c => { this.bindTriggerEvent(c) }}
/>

6.页面事件bindTriggerEvent调用

   bindTriggerEvent = (chart) => {
    chart.on('mouseover', function (params) {
      if (params.componentType == 'xAxis') {
        let offsetX = params.event.event.offsetX;
        let offsetY = params.event.event.offsetY;
        let xAxisTip = document.querySelector('.x-axis-tip');
        xAxisTip.innerText = params.value.split("#")[0];
        xAxisTip.style.left = offsetX +  "px";
        xAxisTip.style.top = offsetY + 10 + "px";
        xAxisTip.style.display = 'block';
      }
    });
    chart.on('mousemove', function (params) {
      if (params.componentType == 'xAxis') {
        let offsetX = params.event.event.offsetX;
        let offsetY = params.event.event.offsetY;
        let xAxisTip = document.querySelector('.x-axis-tip');
        xAxisTip.innerText = params.value.split("#")[0];
        xAxisTip.style.left = offsetX + 30 +  "px";
        xAxisTip.style.top = offsetY + 10 + "px";
        xAxisTip.style.display = 'block';
      }
    });
    chart.on('mouseout', function (params) {
      let xAxisTip = document.querySelector('.x-axis-tip');
      xAxisTip.style.display = 'none';
    });
  }

7.实现效果

注: 需要完整代码可加微信号：han2013555888

标签：style,let,....,chart,ECharts,xAxisTip,params,移上,event
来源： https://blog.csdn.net/web_yueqiang/article/details/101368098

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。