ECharts 5 雷达图可配置 Function
[英]ECharts 5 Radar Chart as Configurable Function
问题描述
我正在尝试获取 eCharts 5 图表的示例作为可配置的 function
我希望能够在多个容器中将数据 + Id 传递给 plot 而无需重复代码
（目前正在从 d3.js 过渡到 eCharts，一般来说并不是最擅长 JS 的，所以为我的愚蠢道歉）
下面的示例似乎由于“Uncaught TypeError: Cannot read property 'getAttribute' of null”而失败
我将其解释为试图在加载 DOM 之前绘制图表，因此我添加了 window.onload 作为黑暗“修复”中的一个镜头
目前没有错误，但没有情节，所以我的“修复”可能还有很长的路要走
感谢您的时间+建议
https://codepen.io/kml-projects/pen/abwRwEb
更新：这是一个工作条形图示例——如果我找到一个，将对此进行修补并发布解决方案
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>
1 个解决方案
解决方案1
0 已采纳 2021-09-25 17:36:50
弄清楚了
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中的tooltip添加到Radar指标
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.