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

ECharts 官网示例调试如下：

同样的参数，写到react 组件中效果如下：

组件完整代码如下：

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 配置项是从什么版本引入的。。。

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

echarts

阅读 7.5k

AI 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 个回答

得票最新

提莫找蘑菇

1.9k31024

发布于
11 月 14 日四川

✓ 已被采纳

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

Seven

1.3k127

发布于
11 月 14 日广东

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

在重绘k线图的实时行情数据的candlestick时，如何不重绘整个k线图?

Echarts中如何实现这样的效果？

ECharts 堆叠图，每一条设置圆角，有什么配置项可以解决？

echarts漏斗图funnel如何调整图表和容器的间距？

如何用echart做一个有厚度的、正面视图的饼图呢？

echart中formatter如何返回默认的格式？

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

你尚未登录，登录后可以

在重绘k线图的实时行情数据的candlestick时，如何不重绘整个k线图?

Echarts中如何实现这样的效果？

ECharts 堆叠图， 每一条设置圆角，有什么配置项可以解决？

echarts漏斗图funnel如何调整图表和容器的间距？

如何用echart做一个有厚度的、正面视图的饼图呢？

echart中formatter如何返回默认的格式？

ECharts 堆叠图，每一条设置圆角，有什么配置项可以解决？