在React中使用Echarts报错Error: Component series.pie not exists. Load it first.并且出现无法使用的情况

Echarts

今天做项目的时候想在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了,然后只需要在上面导包,和在下面调整调整图的大小或者位置就可以了.