雷達圖
阿新 • • 發佈：2018-06-16
art .get ted 預算 HA normal 一個 市場 data
1.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <script src="../echarts.min.js"></script> 8 </head> 9 <body> 10 <!-- 為ECharts準備一個具備大小（寬高）的Dom--> 11 <div id="main" style="width: 900px;height:600px;"></div> 12 <script type="text/javascript"> 13 // 基於準備好的dom，初始化echarts實例 14 var myChart = echarts.init(document.getElementById(‘main‘)); 15 16 // 指定圖表的配置項和數據 17 option = { 18 title: { 19 text: ‘基礎雷達圖‘ 20 }, 21 tooltip: {},22 legend: { 23 data: [‘預算分配（Allocated Budget）‘, ‘實際開銷（Actual Spending）‘] 24 }, 25 radar: { 26 // shape: ‘circle‘, 27 indicator: [ 28 { name: ‘銷售（sales）‘, max: 6500}, 29 { name: ‘管理（Administration）‘, max: 16000}, 30 { name: ‘信息技術（Information Techology）‘, max: 30000}, 31 { name: ‘客服（Customer Support）‘, max: 38000}, 32 { name: ‘研發（Development）‘, max: 52000}, 33 { name: ‘市場（Marketing）‘, max: 25000} 34 ] 35 }, 36 series: [{ 37 name: ‘預算 vs 開銷（Budget vs spending）‘, 38 type: ‘radar‘, 39 // areaStyle: {normal: {}}, 40 data : [ 41 { 42 value : [4300, 10000, 28000, 35000, 50000, 19000], 43 name : ‘預算分配（Allocated Budget）‘ 44 }, 45 { 46 value : [5000, 14000, 28000, 31000, 42000, 21000], 47 name : ‘實際開銷（Actual Spending）‘ 48 } 49 ] 50 }] 51 }; 52 // 使用剛指定的配置項和數據顯示圖表。 53 myChart.setOption(option); 54 </script> 55 </body> 56 </html>
2.效果
雷達圖