echarts雷達圖

本文轉載自查看原文 2016-07-12 14:02 7493 圖表/ echarts/ javascript/ 雷達圖

用echarts展現雷達圖的定制

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>echarts雷達圖</title>
  6     <link rel="shortcut icon" href="favicon.png">
  7     <style>
  8         .main {
  9             height: 330px;
 10             overflow: hidden;
 11             padding : 10px;
 12             margin-bottom: 10px;
 13         }
 14     </style>
 15 </head>
 16 <body>
 17     <div id="main" class="main"></div>
 18 
 19     <script src="echarts.source.js"></script>
 20     <script>
 21         var myChart;
 22         var domMain = document.getElementById('main');
 23         
 24         var option = {
 25             title : {
 26                 text: '評估得分',
 27                 subtext: '評估得分mini',
 28                 show: false
 29             },
 30             tooltip : {
 31                 trigger: 'axis'
 32             },
 33             legend: {
 34                 x : 'center',
 35                 data:['評估得分'],
 36                 show: false
 37             },
 38             toolbox: {
 39                 show : false,
 40                 feature : {
 41                     mark : {show: false},
 42                     dataView : {show: false, readOnly: false},
 43                     restore : {show: false},
 44                     saveAsImage : {show: false}
 45                 }
 46             },
 47             calculable : false,
 48             polar : [
 49                 {
 50                     indicator : [
 51                         {text : '個人情況\n滿分15', max  : 15},
 52                         {text : '信用記錄\n滿分35', max  : 35},
 53                         {text : '經濟實力\n滿分30', max  : 30},
 54                         {text : '穩定情況\n滿分15', max  : 15},
 55                         {text : '貸款情況\n滿分25', max  : 25},
 56                         {text : '工作情況\n滿分30', max  : 30},
 57                         {text : '家庭情況\n滿分15', max  : 15},
 58                         {text : '保障情況\n滿分15', max  : 15},
 59                         {text : '其他\n滿分20', max  : 20}
 60                         
 61                     ],
 62                     radius : 130
 63                 }
 64             ],
 65             series : [
 66                 {
 67                     name: '評估得分',
 68                     type: 'radar',
 69                     itemStyle: {
 70                         normal: {
 71                             areaStyle: {
 72                                 type: 'default'
 73                             }
 74                         }
 75                     },
 76                     data : [
 77                         {
 78                             value : [10,22,20,10,16,15,6,8,15],
 79                             name : '評估得分',
 80                             itemStyle: {
 81                                 normal: {
 82                                     color: '#2c87e5',
 83                                     label: {
 84                                         show: true,
 85                                         formatter:function(params) {
 86                                             return params.value;
 87                                         }
 88                                     },
 89                                     areaStyle: {
 90                                         color: 'rgba(44,135,229,0.3)'
 91                                     }
 92                                 }
 93                             }
 94                         }
 95                     ]
 96                 }
 97             ]
 98         };
 99                     
100         
101         myChart = echarts.init(domMain);
102         myChart.setOption(option, true)
103     </script>
104 </body>
105 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts-雷達圖 Echarts - 雷達圖（用過的屬性） ECharts 英雄聯盟能力分析雷達圖及支付寶信用評分雷達圖 echarts 雷達圖不同類型max設置問題關於echarts生成雷達圖的一些參數介紹 Echarts關於雷達圖的一些個性化設置 ECharts 雷達圖怎么在類目值下面顯示數值 echarts雷達圖點擊事件包含（2.x，3.85，4.02）測試 Echarts中關於雷達圖極坐標值相差過大時的圖像展示問題 Unity 屬性雷達圖