问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小虫_top
    115627

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

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

    echarts
    阅读 559
    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 个回答
    得票最新
    头像
    提莫找蘑菇
      1.9k31024
      ✓ 已被采纳

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

      头像
      Seven
        587116

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

        查看全部 2 个回答
        推荐问题
        宣传栏