# Integrate echarts into self-developed perspective components

**URL:** <https://forum.inductiveautomation.com/t/integrate-echarts-into-self-developed-perspective-components/88192>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 2, 2024, 2:33am UTC](https://forum.inductiveautomation.com/t/integrate-echarts-into-self-developed-perspective-components/88192 "2024-04-02T02:33:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Li\_Shengtao](https://avatars.discourse-cdn.com/v4/letter/l/3ec8ea/32.png) [@Li\_Shengtao](https://forum.inductiveautomation.com/u/Li_Shengtao)\
**Post date:** [April 2, 2024, 2:33am UTC](https://forum.inductiveautomation.com/t/integrate-echarts-into-self-developed-perspective-components/88192/1 "2024-04-02T02:33:38Z")

</div>

Error message:0:21:58.569 [Browser Thread: c606202b-d6f0-40c8-8783-6d87ffcaaef6] ERROR Perspective.Designer.Workspace - level: LEVEL\_ERROR  
message: "TypeError: Cannot read properties of undefined (reading 'createElement')"  
line\_number: 121  
source: "[http://localhost:8088/res/perspective/js/react-dom-18.2.0.js](http://localhost:8088/res/perspective/js/react-dom-18.2.0.js)".

export interface EchartOneProps{  
title: string  
}  
The code is as shown below：  
export class EchartOne extends Component\<ComponentProps,any\>{

```
componentDidMount() {
    this.initChart();
}

initChart = () => {
    let myChart = echarts.init(document.getElementById("echartone"));
    myChart.setOption({
        tooltip: {},
        xAxis: {
            data: ["幼师资源","职场恩省","活动专区","纸币课堂"]
        },
        yAxis: {

        },
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5000,20000,36000,10000]
            }
        ]
    });
}

render() {
    const { props, emit } = this.props;
    return (
        <div {...emit()} title={props.title}>
            <div id="echartone" title={props.title} style={{height: '300px'}}/>
        </div>
    );
}

```

}

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 2, 2024, 10:38am UTC](https://forum.inductiveautomation.com/t/integrate-echarts-into-self-developed-perspective-components/88192/2 "2024-04-02T10:38:40Z")

</div>

You generally have to make a module with the SDK to integrate 3rd-party javascript.