最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】ReactJS中echarts-for-react的饼图的标题文字显示不全

ReactJS crifan 3404浏览 0评论

折腾:

【已解决】ReactJS的ReactJS-AdminLTE中添加ECharts

虽然可以显示饼图了。

但是标题文字,显示不全。

后来看到官网:

ECharts Documentation

说是直接支持Webpack打包,所以去试试

➜  react-hot-boilerplate git:(master) ✗ npm install echarts –save
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
updated 1 package in 11.887s

因为怀疑上面的

textAlign为center

是不是由于Echarts的版本不是最新的所以没生效?

去看了看看:

"echarts-for-react": "^1.4.4”

其是基于Echarts 3.0的

去看看:

"echarts": "^3.6.2”

是更新的3.6.2

结果去试试:

import ReactEcharts from ‘echarts’;

结果出错:

所以放弃吧。

再去试试:

ecomfe/echarts: A powerful, interactive charting and visualization library for browser

-》

xlsdg/react-echarts-v3: React component wrap for ECharts.js(v3.x)

说是支持 ECharts.js(v3.x)

➜  react-hot-boilerplate git:(master) ✗ npm install –save react-echarts-v3
npm WARN [email protected] requires a peer of react@^15.6.1 but none was installed.
added 13 packages in 8.856s

代码:

import ReactEcharts from ‘react-echarts-v3’;
              <ReactEcharts
              option={this.getProspectOption()}  />

结果出错:

放弃了。

后来,改为:

            {/* <ReactEcharts
              option={this.getProspectOption()}
              style={{height: ‘350px’, width: ‘100%’}}
              className=’react_for_echarts’ /> */}
              <ReactEcharts
              option={this.getProspectOption()}
              style={{height: ‘350px’, width: ‘100%’}} />

结果好像至少title的text可以显示完整了

但是,如果加上:

        textAlign: ‘center’,

结果title又显示不全了:

有空再继续研究如何解决。

如果实在无法解决,那就换用div去显示文字,然后再去设置属性吧。

转载请注明:在路上 » 【未解决】ReactJS中echarts-for-react的饼图的标题文字显示不全

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.167 seconds, using 22.16MB memory