ECharts 5 雷达图可配置 Function

Question

I'm trying to get an example of an eCharts 5 chart as a configurable function我正在尝试获取 eCharts 5 图表的示例作为可配置的 function

I want to be able to pass in data + Id's to plot in multiple containers without repeating code我希望能够在多个容器中将数据 + Id 传递给 plot 而无需重复代码

(Currently transitioning from d3.js to eCharts and not the best at JS in general so apologies for my stupidity) （目前正在从 d3.js 过渡到 eCharts，一般来说并不是最擅长 JS 的，所以为我的愚蠢道歉）

The example seems below seems to fail because of a 'Uncaught TypeError: Cannot read property 'getAttribute' of null'下面的示例似乎由于“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"我将其解释为试图在加载 DOM 之前绘制图表，因此我添加了 window.onload 作为黑暗“修复”中的一个镜头

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 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 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>

Answer 1

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>

ECharts 5 雷达图可配置 Function

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-09-25 17:36:50

ECharts 5 雷达图可配置 Function

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-09-25 17:36:50

解决方案1
0 已采纳 2021-09-25 17:36:50