员工技能雷达图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '雷达图' }, tooltip: {}, legend: { data: ['1号员工', '2号员工'] }, radar: { name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, indicator: [ { name: '技能A', max: 6500}, { name: '技能B', max: 16000}, { name: '技能C', max: 30000}, { name: '技能D', max: 38000}, { name: '技能E', max: 52000}, { name: '技能F', max: 25000} ] }, series: [{ type: 'radar', data: [ { value: [4300, 10000, 28000, 35000, 50000, 19000], name: '1号员工' }, { value: [5000, 14000, 28000, 31000, 42000, 21000], name: '2号员工' } ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
Echarts雷达图
最新推荐文章于 2024-04-28 08:55:06 发布