需要实现的效果:

官网里面的demo显示数值,都是在拐点处:

【解决】

1、只显示类目

     <div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
<script>
var arr1 = [60,73,85,40,60];
var arr2 = [23,90,23,32,67];
var mychart = echarts.init(document.getElementById('mychart'));
var option = {
radar: [
{
indicator: [
{text: '品牌', max: 100},
{text: '内容', max: 100},
{text: '可用性', max: 100},
{text: '功能', max: 100},
{text: '屏幕', max: 100}
],
center: ['50%','54%'],//调整雷达图的位置
radius: 80,//半径,可放大放小雷达图
axisLine: {//坐标轴线相关设置
show: true,
lineStyle: {
color: 'red'
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : 'red' // 图表背景网格线的颜色
}
},
splitArea: {
show: false,
},
name: {
rich: {
a: {
color: 'red',
lineHeight:
},
},
formatter: (a)=>{
return `{a|${a}}`
}
}
},
],
series: [
{
type: 'radar',
symbol: 'none',//去掉拐点的圈
data: [
{
value: arr1,
name: '某软件',
areaStyle: {
normal: {
color: 'blue'
}
},
lineStyle: {
color:"rgba(255,255,255,0)"
},
},{
value: arr2,
name:'jja',
areaStyle: {
normal: {
color: 'red' // 图表中各个图区域的颜色
}
},
lineStyle: {
color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
},
}
]
},
]
};
mychart.setOption(option);
</script>

实现效果:

2、实现最简单的数值在类目下

<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
<script>
var arr1 = [60,73,85,40,60];
var arr2 = [23,90,23,32,67];
var mychart = echarts.init(document.getElementById('mychart'));
var option = {
radar: [
{
indicator: [
{text: '品牌', max: 100},
{text: '内容', max: 100},
{text: '可用性', max: 100},
{text: '功能', max: 100},
{text: '屏幕', max: 100}
],
center: ['50%','54%'],//调整雷达图的位置
radius: 80,//半径,可放大放小雷达图
axisLine: {//坐标轴线相关设置
show: true,
lineStyle: {
color: 'red'
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : 'red' // 图表背景网格线的颜色
}
},
splitArea: {
show: false,
},
name: {
rich: {
a: {
color: 'red',
lineHeight:
},
b: {
color: '#fff',
align: 'center',
backgroundColor: '#666',
padding: ,
borderRadius:
}
},
formatter: (a,b)=>{
return `{a|${a}}\n{b|}`
}
}
},
],
series: [
{
type: 'radar',
symbol: 'none',//去掉拐点的圈
data: [
{
value: arr1,
name: '某软件',
areaStyle: {
normal: {
color: 'blue'
}
},
lineStyle: {
color:"rgba(255,255,255,0)"
},
},{
value: arr2,
name:'jja',
areaStyle: {
normal: {
color: 'red' // 图表中各个图区域的颜色
}
},
lineStyle: {
color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
},
}
]
},
]
};
mychart.setOption(option);
</script>

3、实现最终效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
<script>
var arr1 = [,,,,];
var arr2 = [,,,,];
var mychart = echarts.init(document.getElementById('mychart'));
var option = {
radar: [
{
indicator: [
{text: '品牌', max: 100},
{text: '内容', max: 100},
{text: '可用性', max: 100},
{text: '功能', max: 100},
{text: '屏幕', max: 100}
],
center: ['50%','54%'],//调整雷达图的位置
radius: 80,//半径,可放大放小雷达图
axisLine: {//坐标轴线相关设置
show: true,
lineStyle: {
color: 'red'
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : 'red' // 图表背景网格线的颜色
}
},
splitArea: {
show: false,
},
},
],
series: [
{
type: 'radar',
symbol: 'none',//去掉拐点的圈
data: [
{
value: arr1,
name: '某软件',
areaStyle: {
normal: {
color: 'blue'
}
},
lineStyle: {
color:"rgba(255,255,255,0)"
},
},{
value: arr2,
name:'jja',
areaStyle: {
normal: {
color: 'red' // 图表中各个图区域的颜色
}
},
lineStyle: {
color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
},
}
]
},
]
};
mychart.setOption(option);
var i = -1;
mychart.setOption({
radar: [
{
name: {
rich: {
a: {
color: 'red',
lineHeight:
},
b: {
color: '#fff',
align: 'center',
backgroundColor: '#666',
padding: ,
borderRadius:
}
},
formatter: (a,b)=>{
i++;
return `{a|${a}}\n{b|${arr1[i]}}`
}
}
}
]
})
</script>
</body>
</html>

效果:

ECharts 雷达图怎么在类目值下面显示数值的更多相关文章

  1. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  3. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  4. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  5. ECharts雷达图详细配置说明

    雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...

  6. Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战

    Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...

  7. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  9. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

随机推荐

  1. 在CentOS6.x下安装Compiz——桌面立方体,特效种种

    很多人貌似认为compiz必须要emerland,但事实上,没这个必要. compiz+gnome,实用,而又华丽,是个不错的选择. compiz需要显卡驱动,一般情况下不成问题(别忘了这是很新的ce ...

  2. grid search

    sklearn.metrics.make_scorer(score_func, greater_is_better=True, needs_proba=False, needs_threshold=F ...

  3. Luogu 1099 树网的核

    bzoj1999 数据加强版(n <= 5e5) 较早的noip题,值得研究 重要结论:直径的最长性,任何从直径中离开直径的点到它离开的点的距离,都不会比直径的另一端到它离开的点长(否则就有新的 ...

  4. 利用AdaBoost方法构建多个弱分类器进行分类

    1.AdaBoost 思想 补充:这里的若分类器之间有比较强的依赖关系;对于若依赖关系的分类器一般使用Bagging的方法 弱分类器是指分类效果要比随机猜测效果略好的分类器,我们可以通过构建多个弱分类 ...

  5. Linux系统获取CPU温度

    Linux系统获取CPU温度 摘自:https://jingyan.baidu.com/article/cbf0e500407d072eab289343.html 各位好,本篇将简单介绍如何在不同系列 ...

  6. 通过event事件来控制红绿灯通行车辆

    事件的初始值为False,所以最开始就是红灯,先模拟红绿灯的规律,设定为每两秒变换一次灯,然后再模拟车辆通行,通过事件来将两者的事件结合起来, 当事件为False时,为红灯,车辆处于等待状态,一直wa ...

  7. JavaWeb中的路径问题

    JavaWEB 开发中的 / 的含义 ①.当前WEB应用的根路径(http://localhost:8080/contextPath/) 请求转发时:request.getRequestDispath ...

  8. ThreadStart方式实现多线程

    以ThreadStart方式实现多线程 3.1 使用ThreadStart委托 这 里先以一个例子体现一下多线程带来的好处,首先在Message类中建立一个方法ShowMessage(),里面显示了当 ...

  9. 关于"人工智能Python""系统环境变量设置步骤

    最近无论是JAVA的环境变量配置,还是Python环境变量配置都有学生问我,我在这里写一下回答,当然我以配置Python的环境变脸来举例.首先需要确定本机电脑上安装上了Python 首先解释一下为什么 ...

  10. redis过期key的清理策略

    一,有三种不同的删除策略(1),立即清理.在设置键的过期时间时,创建一个回调事件,当过期时间达到时,由时间处理器自动执行键的删除操作. (2),惰性清理.键过期了就过期了,不管.当读/写一个已经过期的 ...