社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
今天做项目的时候想在React页面添加一个饼状的一个统计图,但是到处遇坑,花了一个小时时间终于解决了这个问题,但是怕忘记所以来这里充电,记录以免以后再次发生相同的错误,今天想使用一下Echarts,但是官方的文档中并未有Echarts在React中使用的文档,这使我十分苦恼,React这么牛,现在都没有教程,心伤伤(这里小小的吐槽一下),于是只能自己写一个来加强记忆了,在网络上直接拷贝了一些React中使用Echarts的实例后自己改变了里面绘制内容出现以下问题,
大家可能会遇到下图中将pie换成其他的错误,这个错误其实很简单,只是因为你没有导入对应的包,比如柱状图:
import 'echarts/lib/chart/bar';
在比如说我要导入的圆形统计图,这个时候就要导入
import 'echarts/src/chart/pie';
类似的还有特别多,这个网上都可以百度,就不多说了
导入了之后类似下列的问题都迎刃而解
然后记录一下React导入Echarts的一个大致方法,不能说都适用,但是一些简单的都可以这么去做
import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/src/chart/pie';
class Surface extends Component {
componentDidMount() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
});
}
render() {
return (
<div id="main" style={{ width: 400, height: 400 }}></div>
);
}
}
export default Surface;
然后就可以在官网上面选择添加你想添加的代码,复制过来就可以轻松在React中使用Echarts了,然后只需要在上面导包,和在下面调整调整图的大小或者位置就可以了.
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!