Echarts2.0雷达图tooltip单轴数据

简介: Echarts2.0雷达图tooltip单轴数据


option = {
    title : {
        text: '消防训练量化评分',
        show:true,
      x:'center'
    },
    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 : '3%',
        y : '10%',
        orient: 'vertical',
        align: 'left',
        data:['60米肩梯量化评分','3000米量化评分'],
        show: true
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: false},
            dataView : {show: false, readOnly: false},
            restore : {show: false},
            saveAsImage : {show: false}
        }
    },
    calculable : false,
    polar : [
        {
            indicator : [
                {text : '赵', max  : 15},
                {text : '钱', max  : 35},
                {text : '孙', max  : 30},
                {text : '周', max  : 15},
                {text : '吴', max  : 25},
                {text : '郑', max  : 30},
                {text : '王', max  : 15},
                {text : '冯', max  : 15},
                {text : '陈', max  : 20}
            ],
            radius : 130,
          shape: 'circle',  
        }
    ],
    series : [
        {
            name: '消防训练量化评分',
            type: 'radar',
           // itemStyle: {
              //  normal: {
                  //  areaStyle: {
                        //type: 'default'
                   // }
                //}
         //   },
            data : [
                {
                    value : [10,22,20,10,16,15,6,8,15],
                    name : '60米肩梯量化评分',
                    itemStyle: {
                        normal: {
                            color: '#87CEFF',
                            label: {
                               show: true,
                                formatter:function(params) {
                                    return params.value;
                                }
                            },
                           // areaStyle: {
                               // color: '#87CEFF'
                          //  }
                        }
                    }
                },
                {
                    value : [12,12,24,8,7,17,9,10,17],
                    name : '3000米量化评分',
                    itemStyle: {
                        normal: {
                           //color: '#CDB5CD',
                            label: {
                                show: true,
                                formatter:function(params) {
                                    return params.value;
                                }
                            }
                        }
                    }
                }
            ]
        }
    ]
};
相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
239 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
176 23
echarts地图数据信息流向图效果
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
172 2
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
555 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文件展示,适合各水平开发者快速掌握数据可视化技能。
62 0
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
74 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
407 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】

热门文章

最新文章