Echarts图表之雷达图(二)

最新推荐文章于 2024-04-29 21:10:25 发布

gly_technology

最新推荐文章于 2024-04-29 21:10:25 发布

阅读量3.6k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/gly_technology/article/details/122572994

版权

<!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'));
           var option = {
               backgroundColor: 'rgba(204,204,204,0.7 )',
               // 背景色，默认无背景 rgba(51,255,255,0.7)
               radar: [{ // 雷达图坐标系组件，只适用于雷达图。
                   center: ['50%', '50%'],
                   // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                   radius: 160,
                   // 圆的半径，数组的第一项是内半径，第二项是外半径。
                   startAngle: 50,
                   // 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
                   name: { // (圆外的标签)雷达图每个指示器名称的配置项。
                       formatter: '{value}',
                       textStyle: {
                           fontSize: 15,
                           color: '#000'
                       }
                   },
                   nameGap: 15,
                   // 指示器名称和指示器轴的距离。[ default: 15 ]
                   splitNumber: 4,
                   // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
                   shape: 'circle',
                   // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
                   axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
                       lineStyle: {
                           color: '#fff',
                           // 坐标轴线线的颜色。
                           width: 1,
                           // 坐标轴线线宽。
                           type: 'solid',
                           // 坐标轴线线的类型。
                       }
                   },
                   splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                       lineStyle: {
                           color: '#fff',
                           // 分隔线颜色
                           width: 2,
                           // 分隔线线宽
                       }
                   },
                   splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                       show: true,
                       areaStyle: { // 分隔区域的样式设置。
                           color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
                           // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                       }
                   },
                   indicator: [{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
                           name: '超速',
                           // 指示器名称
                           max: 15000,
                           // 指示器的最大值，可选，建议设置
                           //color: '#fff' // 标签特定的颜色。
                       },
                       {
                           name: '闯红灯',
                           max: 10000
                       },
                       {
                           name: '闯禁行',
                           max: 8000
                       },
                       {
                           name: '违停',
                           max: 2000
                       },
                       {
                           name: '逆行',
                           max: 500
                       }
                   ]
               }],
               series: [{
                   name: '雷达图',
                   // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                   type: 'radar',
                   // 系列类型: 雷达图
                   itemStyle: { // 折线拐点标志的样式。
                       normal: { // 普通状态时的样式
                           lineStyle: {
                               width: 1
                           },
                           opacity: 0.2
                       },
                       emphasis: { // 高亮时的样式
                           lineStyle: {
                               width: 5
                           },
                           opacity: 1
                       }
                   },
                   data: [{ // 雷达图的数据是多变量（维度）的
                       name: '',
                       // 数据项名称
                       value: [11035, 6013, 5067, 1520, 284],
                       // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
                       symbol: 'circle',
                       // 单个数据标记的图形。
                       symbolSize: 5,
                       // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                       itemStyle: { // 单个拐点标志的样式设置。
                           normal: {
                               borderColor: 'rgba(255,0,0,1)',
                               // 拐点的描边颜色。[ default: '#000' ]
                               borderWidth: 3,
                               // 拐点的描边宽度，默认不描边。[ default: 0 ]
                           }
                       },
                       lineStyle: { // 单项线条样式。
                           normal: {
                               opacity: 0.5 // 图形透明度
                           }
                       },
                       areaStyle: { // 单项区域填充样式
                           normal: {
                               color: '#704A23' // 填充的颜色。[ default: "#000" ]
                           }
                       }
                   }]
               }, ]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>

gly_technology

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Echarts图表之雷达图(二)

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Echarts图表</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....
复制链接

扫一扫