消防训练量化评分雷达图单轴数据的实现基于echarts 2.0X版

简介: 消防训练量化评分雷达图单轴数据的实现基于echarts 2.0X版
option = {
    title: {
        text: '消防训练量化评分雷达图'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params, ticket, callback) {
            var showHtm = "";
            for (var i = 0; i < params.length; i++) {
                //x轴名称
                var name = params[i][1];
                //名称
                var text = params[i][3];
                //值
                var value = params[i][2];
                //提示框显示
                showHtm += name + ':' + value + '<br>'
            }
            return text + '<br>' + showHtm;
        }
    },
    legend: {
        x: 'center',
        y: 'bottom',
        data: ['60米肩梯量化评分', '3000米量化评分', '5000米负重量化评分', '100米负重量化评分', '负重折返跑量化评分', '爬绳上四楼量化评分',
            '400米物资疏散量化评分', '负重上10楼量化评分', '单杠卷腹量化评分', '双杠曲臂伸量化评分', '单杠引体向上量化评分'
        ]
    },
    polar: [{
        indicator: [{
                text: '孙悟空',
                max: 100
            },
            {
                text: '猪悟能',
                max: 100
            },
            {
                text: '沙悟净',
                max: 100
            },
            {
                text: '唐三藏',
                max: 100
            },
            {
                text: '红孩儿',
                max: 100
            },
            {
                text: '牛魔王',
                max: 100
            }
        ],
        radius: '80%',
        startAngle: 120
    }],
    series: [{
        name: '总点击量',
        type: 'radar',
        data: [{
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            },
            {
                value: [],
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }
                }
            }
        ]
    }]
};
option.series[0].data[0].value = [12, 32, 34, 53, 53, 65];
option.series[0].data[0].name = '60米肩梯量化评分';
option.series[0].data[1].value = [78, 98, 90, 94, 98, 37];
option.series[0].data[1].name = '3000米量化评分';
option.series[0].data[2].value = [70, 90, 80, 59, 63, 25];
option.series[0].data[2].name = '5000米负重量化评分';
option.series[0].data[3].value = [78, 98, 90, 94, 98, 37];
option.series[0].data[3].name = '100米负重量化评分';
option.series[0].data[4].value = [68, 88, 80, 84, 88, 47];
option.series[0].data[4].name = '负重折返跑量化评分';
option.series[0].data[5].value = [58, 58, 50, 74, 78, 67];
option.series[0].data[5].name = '爬绳上四楼量化评分';
option.series[0].data[6].value = [48, 48, 40, 44, 48, 47];
option.series[0].data[6].name = '400米物资疏散量化评分';
option.series[0].data[7].value = [68, 68, 60, 64, 68, 67];
option.series[0].data[7].name = '负重上10楼量化评分';
option.series[0].data[8].value = [38, 38, 30, 34, 38, 37];
option.series[0].data[8].name = '单杠卷腹量化评分';
option.series[0].data[9].value = [18, 18, 10, 14, 18, 17];
option.series[0].data[9].name = '双杠曲臂伸量化评分';
option.series[0].data[10].value = [58, 58, 50, 54, 58, 57];
option.series[0].data[10].name = '单杠引体向上量化评分';
相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
158 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
146 23
echarts地图数据信息流向图效果
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
86 2
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
453 0
|
4月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
53 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
269 0
|
5月前
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
141 0
|
5月前
echarts 数据格式化
echarts 数据格式化
50 0
下一篇
无影云桌面