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>