I'm trying to get an example of an eCharts 5 chart as a configurable function
I want to be able to pass in data + Id's to plot in multiple containers without repeating code
(Currently transitioning from d3.js to eCharts and not the best at JS in general so apologies for my stupidity)
The example seems below seems to fail because of a 'Uncaught TypeError: Cannot read property 'getAttribute' of null'
I interpreted that as the chart attempting to be drawn before the DOM is loaded, so I added the window.onload as a shot in the dark "fix"
Currently no errors, but no plots, so my "fix" is probably way off
Thanks for your time + suggestions
https://codepen.io/kml-projects/pen/abwRwEb
UPDATE: This is a working bar chart example -- will be tinkering with this and post a solution if I find one
https://codepen.io/kml-projects/pen/OJgBaQx
function createChart(divId,data) {
var myChart = echarts.init(document.getElementById(divId));
var app = {};
var option;
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Allocated Budget', 'Actual Spending']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: data,
},
]
}
]
};
myChart.setOption(option);
};
var data1 = [4200, 3000, 20000, 35000, 50000, 18000];
var data2 = [5000, 14000, 28000, 26000, 42000, 21000];
window.onload = function () {
createChart('main', data1 );
createChart('main-2', data2 );
};<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main-2" style="width: 600px;height:400px;"></div>
</body>
</html>Figured it out
var app = {};
dataI = [62, 86, 70, 62, 40, 82, 95, 72, 60, 78];
function createRadarChart(divId,dataI) {
var myChart = echarts.init(document.getElementById("container"));
MPVI = {
// title: {
// text: 'title',
// left: 'center'
// },
// legend: {
// data: ['item1', 'item2','item3']
// },
// tooltip: {
// // enterable: true,
// trigger: 'item',
// triggerOn: 'mousemove',
// formatter: function (params) {
// return `${params.name}`;}},
radar: {
indicator: [
{ name: 'Aesthetics', max: 100}, // 62
{ name: 'Affiliation', max: 100}, // 86
{ name: 'Altruistic', max: 100}, // 70
{ name: 'Commerce', max: 100}, // 62
{ name: 'Hedonism', max: 100}, // 40
{ name: 'Power', max: 100}, // 82
{ name: 'Recognition', max: 100}, // 95
{ name: 'Science', max: 100}, // 72
{ name: 'Security', max: 100}, // 60
{ name: 'Tradition', max: 100}, // 78
],
name: {
textStyle: {
color: 'black',
fontSize: 13,
fontFamily:'sans-serif',
}
},
},
series: [{
name: '(MPVI)',
type: 'radar',
center: ['25%', '100%'],
data: [
{
value: dataI,
name: '(MPVI)',
symbol: 'diamond',
symbolSize: 25,
itemStyle: { normal: { color: '#ffffff' }, }, },
],
emphasis: {
areaStyle: {
color: 'rgba(255,255,255,0.5)'
}},
label: {
show: true,
formatter: function (params) {
return params.value;
}
},
itemStyle: {
borderWidth: 10 },
lineStyle: {
width: 4,
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 10,
shadowOffsetY: 8
},
},{
name: 'LOW',
type: 'radar',
center: ['25%', '100%'],
data: [
{
value: [35,35,35,35,35,35,35,35,35,35,35,35,35,35],
name: 'LOW',
symbol: 'none',
symbolSize: 10,
itemStyle: { normal: { color: ' rgb(220,20,60,0.2)' }, }, },
],
emphasis: {
areaStyle: {
color: 'rgb(220,20,60,0.2)'
}},
areaStyle: {
color: 'rgb(220,20,60,0.2)'
},
itemStyle: {
borderWidth: 10 },
lineStyle: {
width: 4,
}
},{
name: 'AVERAGE',
type: 'radar',
center: ['25%', '100%'],
data: [
{
value: [75,75,75,75,75,75,75,75,75,75,75,75],
name: 'AVERAGE',
symbol: 'none',
symbolSize: 10,
itemStyle: { normal: { color: ' rgb(240,190,84,0.2)' }, }, },
],
emphasis: {
areaStyle: {
color: 'rgb(240,190,84,0.2)'
}},
areaStyle: {
color: 'rgb(240,190,84,0.2)'
},
itemStyle: {
borderWidth: 10 },
lineStyle: {
width: 4,
}
},{
name: 'HIGH',
type: 'radar',
center: ['25%', '100%'],
data: [
{
value: [100,100,100,100,100,100,100,100,100,100,100,100,],
name: 'HIGH',
symbol: 'none',
symbolSize: 10,
itemStyle: { normal: { color: ' rgb(60,179,113,0.1)' }, },
},
],
emphasis: {
areaStyle: {
color: 'rgb(60,179,113,0.1)'
}},
itemStyle: {
borderWidth: 10 },
areaStyle: {
color: 'rgb(60,179,113,0.1)'
},
lineStyle: {
width: 4,
}
},
],
};
myChart.setOption(MPVI);
}
createRadarChart("container",dataI);<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=radar
-->
<!DOCTYPE html>
<style>
.button {
border: none;
color: white;
padding: 3px 66px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 0px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #16AEBB;
border: 2px solid #16AEBB;
}
.button1:hover {
background-color: #16AEBB;
color: white;
}
span {
font-family: 'Open Sans', sans-serif;
}
h2 {
font-variant: small-caps;
color:#ffffff;
height: 40px;
background-color: #bae2e6;
}
</style>
<html style="height: 100%">
<body style="height: 100%; margin: 0" id="eChartOne">
<div id="container" style="height: 80%; width:80%; align:center;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->
</body>
</html>