ECharts 5 雷达图作为可配置函数
ECharts 5 Radar Chart as Configurable Function
我正在尝试获取 eCharts 5 图表的示例作为可配置函数
我希望能够传入数据 + Id 以在多个容器中绘制而无需重复代码
（目前正在从 d3.js 过渡到 eCharts，总体上不是最擅长 JS 的，所以为我的愚蠢道歉）
下面的示例似乎因为“未捕获类型错误：无法读取 属性 'getAttribute' of null”而失败
我将其解释为试图在加载 DOM 之前绘制图表，因此我将 window.onload 添加为暗中拍摄“修复”
目前没有错误，但没有情节，所以我的“修复”可能还差得远
感谢您的宝贵时间和建议
https://codepen.io/kml-projects/pen/abwRwEb
更新：这是一个有效的条形图示例 - 将对此进行修改，如果我找到 post 解决方案
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>
想通了
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>
我正在尝试获取 eCharts 5 图表的示例作为可配置函数
我希望能够传入数据 + Id 以在多个容器中绘制而无需重复代码
（目前正在从 d3.js 过渡到 eCharts，总体上不是最擅长 JS 的，所以为我的愚蠢道歉）
下面的示例似乎因为“未捕获类型错误：无法读取 属性 'getAttribute' of null”而失败
我将其解释为试图在加载 DOM 之前绘制图表，因此我将 window.onload 添加为暗中拍摄“修复”
目前没有错误，但没有情节，所以我的“修复”可能还差得远
感谢您的宝贵时间和建议
https://codepen.io/kml-projects/pen/abwRwEb
更新：这是一个有效的条形图示例 - 将对此进行修改，如果我找到 post 解决方案
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>
想通了
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>