react中使用echarts和富文本

import React, { Component } from 'react'




// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';

// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

//  富文本
import E from 'wangeditor'





class power extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            // 富文本
            editorContent: "<div>默认值</div>"

        }
    }
    render() {
        return (

            <div>
                    <p> 富文本的相关引用  </p>
              
            {/* <div id="main" style={{ width: "100%", height: "600px" }}></div> */}
                {/* <div id="pie" style={{ width: "600px", height: "400px" }}></div> */}

                {/*  富文本  */}
                <div className="shop">
                    <div className="text-area" >
                        <div ref="editorElemMenu"
                            style={{ backgroundColor: '#f1f1f1', border: "1px solid #ccc" }}
                            className="editorElem-menu">

                        </div>
                        <div
                            style={{
                                padding: "0 10px",
                                overflowY: "hidden",
                                height: 600,
                                border: "1px solid #ccc",
                                borderTop: "none"
                            }}
                            ref="editorElemBody" className="editorElem-body">

                        </div>
                    </div>
                </div>


            </div>

        )
    }
    componentDidMount() {

        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById('main'));
        // // 绘制图表
        // myChart.setOption({
        //     title: { text: "柱形图" },
        //     tooltip: {},
        //     xAxis: {
        //         data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '销量',
        //         type: 'bar',
        //         data: [5, 20, 36, 10, 10, 20]
        //     }]
        // });


        //  富文本
        const elemMenu = this.refs.editorElemMenu;
        const elemBody = this.refs.editorElemBody;
        const editor = new E(elemMenu,elemBody)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            console.log(editor.txt.html())
            this.setState({
                // editorContent: editor.txt.text()
                editorContent: editor.txt.html()
            })
        }
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.customConfig.uploadImgShowBase64 = true
        editor.customConfig.uploadImgServer = '/upload';  // 上传图片到服务器
        // 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        // 限制一次最多上传 5 张图片
        editor.customConfig.uploadImgMaxLength = 1;
        // 自定义文件名
        editor.customConfig.uploadFileName = 'editor_img';
        // 将 timeout 时间改为 3s
        editor.customConfig.uploadImgTimeout = 5000;
    
        editor.customConfig.uploadImgHooks = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    
                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
                // alert("前奏");
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                // var url = result.data.url;
                // alert(JSON.stringify(url));
                // editor.txt.append(url);
                // alert("成功");
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                alert("失败");
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                // alert("错误");
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                var url = result.data[0];
                insertImg(url);
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }

        editor.create();
        //  富文本回显  比如后后台请求的接口数据  用于渲染页面
   
        editor.txt.html( this.state.editorContent );



    }

 

}
export default power;

默认的富文本怎么显示？

editorContent  就是默认的数据
 editor.txt.html( this.state.editorContent );