Echarts图表之雷达图(一)

原创已于 2022-01-19 08:38:39 修改 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-01-18 09:57:53 首次发布

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           option = {
               color: ['#f1ff00', '#00c1ff', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074','#546570', '#c4ccd3'],
               backgroundColor: 'rgba(1,202,217,.2)',
               grid: {
                   left: 20,
                   right: 20,
                   top: 30,
                   bottom: 30
               },
               //雷达坐标系
               radar: {
                   name: {
                       textStyle: {
                           fontSize: 10,
                           color: 'rgba(255,255,255,.8)'
                       }
                   },
                   splitLine: {
                       lineStyle: {
                           color: [
                               'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
                           ].reverse()
                       }
                   },
                   splitArea: {
                       show: false
                   },
                   axisLine: {
                       lineStyle: {
                           color: 'rgba(1,202,217,.7)'
                       }
                   },
                   //雷达图的指示器，用来指定雷达图中的多个变量(维度)
                   indicator: [{
                           name: '红色警情',
                           max: 6500
                       },
                       {
                           name: '橙色警情',
                           max: 16000
                       },
                       {
                           name: '黄色警情',
                           max: 30000
                       },
                       {
                           name: '绿色警情',
                           max: 44000
                       }
                   ]
               },
               series: [{
                   name: '',
                   // 类型：雷达图
                   type: 'radar',
                   radius: [5, 100],
                   center: ['50%', '50%'],
                   data: [{
                           value: [4300, 10000, 28000, 19000],
                           name: ''
                       },
                       {
                           value: [5000, 14000, 22000, 41000],
                           name: ''
                       }
                   ]
               }]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>