ECharts 配置圆角,官方示例可以用,写到react 组件中为什么不生效了?

ECharts 官网示例调试如下:
img_v3_02gk_e3419c43-1b3e-4304-ab0f-d9d8b51ac1fg.jpg

同样的参数,写到react 组件中效果如下:
img_v3_02gk_33c34309-1365-4eb1-b96b-cd6e5923fc0g.jpg

组件完整代码如下:

import React, { Component } from "react";
import * as echarts from 'echarts';
import styles from './main.scss';

export default class LineEcharts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }
    this.myChart3 = null;
  }
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu']
        },

        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334],
            itemStyle:{
              borderRadius:[0,50,50,0],
            },
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134],
            itemStyle:{
              borderRadius:[5,20,50,90],
            },
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234]
          },

        ]
      };
  componentDidMount() {
    this.myChart3 = null;
    this.refreshMyChar3()
  }

  refreshMyChar3 = () => {
    let _this = this;
    let chartDom = document.getElementById('lineEcharts3');

    this.myChart3 = echarts.init(chartDom);
    this.myChart3.showLoading({
      text: '数据加载中',
      zlevel: 99,
    })
    setTimeout(() => {
      _this.myChart3.hideLoading();
      _this.myChart3.setOption(this.option);
      _this.myChart3.resize();
    }, 100);
  }

  render() {
    return (
      <div className={styles.echartsbox}>
        <div id="lineEcharts3"><div style={{ paddingTop: "70px", textAlign: 'center', fontSize:'14px'}}>数据加载中</div></div>
      </div >
    )
  }
};

我现在不确定是不是因为版本造成的 项目中使用的 ECharts 版本是 4.9.0 ,但是没有查到 itemStyle.borderRadius 配置项是从什么版本引入的。。。

有没有有经验的大佬指导一下。。。帮忙给看看是那里的问题?

阅读 4.4k
avatarAI BotBETA
这个问题可能是由于 ECharts 图表容器的尺寸问题导致的。在 React 组件中,当 ECharts 初始化时,如果容器(这里是 `#lineEcharts3`)的尺寸还没有被正确计算或者为0,那么即使你设置了 `borderRadius`,也可能因为图表没有足够的空间来渲染圆角而看起来没有效果。

### 解决方案

1. **确保容器有尺寸**:
   - 确保在 ECharts 初始化时,容器 `#lineEcharts3` 已经有明确的宽度和高度。可以通过 CSS 设置一个固定的尺寸,或者使用 `clientHeight` 和 `clientWidth` 在 `componentDidMount` 中检查容器的尺寸。

2. **延迟初始化**:
   - 如果容器的尺寸依赖于其他异步操作(如数据加载或样式计算),你可能需要延迟 ECharts 的初始化直到这些操作完成。

3. **使用 `ref` 代替 `document.getElementById`**:
   - 在 React 中,更推荐使用 `ref` 来引用 DOM 元素,而不是 `document.getElementById`。这有助于保持组件的封装性和可测试性。

4. **检查 CSS**:
   - 确保没有其他 CSS 样式(如 `overflow: hidden`)影响到图表的渲染。

5. **更新 ECharts**:
   - 尽管 `borderRadius` 在 ECharts 4.x 版本中应该已经支持,但总是好的做法检查是否有可用的更新,因为新版本可能修复了旧版本中的bug。

### 示例代码修改

这里是如何使用 `ref` 来引用 DOM 元素的示例:

import React, { Component, createRef } from "react";
import * as echarts from 'echarts';
import styles from './main.scss';

export default class LineEcharts extends Component {
constructor(props) {

super(props);
this.state = {
  loading: true,
};
this.myChart3 = null;
this.chartRef = createRef();

}

componentDidMount() {

this.refreshMyChar3();

}

refreshMyChar3 = () => {

this.myChart3 = echarts.init(this.chartRef.current);
this.myChart3.showLoading({
  text: '数据加载中',
  zlevel: 99,
});
setTimeout(() => {
  this.myChart3.hideLoading();
  this.myChart3.setOption(this.option);
  this.myChart3.resize();
}, 100);

};

render() {

return (
  <div className={styles.echartsbox}>
    <div ref={this.chartRef} style={{ width: '600px', height: '400px' }}>
      <div style={{ paddingTop: "70px", textAlign: 'center', fontSize: '14px' }}>
        数据加载中
      </div>
    </div>
  </div>
);

}

// ... 其他代码和 option 配置保持不变
};


确保 `#lineEcharts3` 的父容器也有足够的空间来显示图表。如果问题仍然存在,请检查控制台是否有任何错误或警告,并考虑升级 ECharts 到最新版本。
2 个回答

你项目4的版本,就是你搜索的字段barBorderRadius5的版本是borderRadius;而你用的是5的配置字段,字段有调整,你更改一下

itemStyle.borderRadius 是在 ECharts 5.0.0 版本中引入的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏