首頁 > 開發者 > JavaScript

雷達圖，雷達圖分析法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

雷達圖，雷達圖分析法

該雷達圖是依賴於Echarts架構的。

 1 <!DOCTYPE html> 2 <head> 3     <meta charset="utf-8"> 4     <title>ECharts</title> 5     <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></script>  // 需要引入echarts檔案 6     <style type="text/css"> 7         html, 8         body { 9             width: 100%;10             height: 100%;11         }12     </style>13 </head>14 15 <body>16     <!-- 為ECharts準備一個具備大小（寬高）的Dom -->17     <div id="main" style="width:495px; height:250px;margin: 100px auto;"></div>18     <!-- ECharts單檔案引入 -->19     <script src="js/echarts-all.js" type="text/javascript" charset="utf-8"></script>20     <script type="text/javascript">21         var option = { //可以去官網上根據每個案例不同的option去寫各種圖形22             title: {   //標題23                 text: 'OP系統點擊量'24             },25             tooltip: {   //提示框，滑鼠懸浮互動時的資訊提示26                 show:true,27                 trigger: 'axis'28             },29             legend: {    //圖例，每個圖表最多僅有一個圖例30                 x: 'center',31                 data: ['ESOP系統', 'VGOP系統']32             },33             polar: [{    //極座標 34                 indicator: [{text: '計劃部',max: 100}, 35                             {text: '市場部',max: 100},36                             {text: '政企客戶部',max: 100},37                             {text: '客戶服務部',max: 100},38                             {text: '鐵通公司',max: 100},39                             {text: '其他',max: 100}40                            ],41                 radius: 100,      42                 startAngle: 120   // 改變雷達圖的旋轉度數43             }],44             45             series: [{         // 驅動圖表產生的資料內容數組，數組中每一項為一個系列的選項及資料46                 name: '總點擊量',47                 type: 'radar',48                 itemStyle: {//圖形樣式，可設定圖表內圖形的預設樣式和強調樣式（懸浮時樣式）：49                     normal: {50                         areaStyle: {51                             type: 'default'52                         }53                     }54                 },55                 data: [{56                     value: [],      //外部載入，也可以通過ajax去載入外部資料。57                     name: ''       58                 }, {59                     value: [78,98,90,94,98,37],60                     name: 'VGOP系統'61                 }]62             }]63         };64         $(function() {65             option.series[0].data[0].value=[12,32,34,53,53,65];  // 載入資料到data中66             option.series[0].data[0].name ='ESOP系統';
67             var myChart = echarts.init(document.getElementById('main'));  68             myChart.setOption(option, true);   //為echarts對象載入資料69         });70     </script>71 </body>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More