I'm trying to output this code within a page, but it doesn't work with HTML widget. Help.

[doglikecat]

<script src="echarts.js"></script>
<!-- Prepare a DOM with a defined width and height for ECharts -->
<div id="main" style="width: 60px;height:40px;"></div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));

// Specify the configuration items and data for the chart
var option = {
backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{ value: 235, name: '视频广告' },
{ value: 274, name: '联盟广告' },
{ value: 310, name: '邮件营销' },
{ value: 335, name: '直接访问' },
{ value: 400, name: '搜索引擎' }
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};


// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>

 

[doglikecat]

The code block above worked fine with the header footer plugin, another code block using the 3d library worked fine with both plugins. Both code blocks have a .js file and a .gltf file right inside the public_html folder, and there is no difference in loading them. So echart and elementor collide, why does echart collide with elementor?