ECharts 雷达图怎么在类目值下面显示数值
需要实现的效果:
官网里面的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 雷达图怎么在类目值下面显示数值的更多相关文章
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- ECharts雷达图详细配置说明
雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...
- Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战
Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
随机推荐
- 默默的发现在网上找到的hook NtQueryDirectoryFile......
默默的发现在网上找到的hook NtQueryDirectoryFile...... hook NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...
- 34.UCASE() LCASE() 函数
UCASE() 函数 UCASE 函数把字段的值转换为大写. SQL UCASE() 语法 SELECT UCASE(column_name) FROM table_name SQL UCASE() ...
- Installing XGBoost on Mac OSX
0. Get gcc with open mp. Just paste and execute the following command in your terminal, once Home ...
- js-修改url中某个指定的参数的值
/* * url 目标url * arg 需要替换的参数名称 * arg_val 替换后的参数的值 * return url 参数替换后的url */ function changeURLArg(ur ...
- 《the art of software testing》 第三章 人工测试
在深入研究较为传统的计算机测试技术之前,要先进行"人工测试". 代码检查与走查是两种主要的人工测试方法. 代码检查与走查是对过去桌面检查过程(在提交测试前由程序员阅读自己程序的过程 ...
- POJ3041 Asteroids(二分图最小点覆盖)
Description Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape o ...
- [转载] java中关于OOM的场景及解决方法
1.OOM for Heap=>例如:java.lang.OutOfMemoryError: Java heapspace[分析] 此OOM是由于JVM中heap的最大值不满足需要,将设置hea ...
- CentOS 6.9下PXE+Kickstart无人值守安装操作系统
一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持 ...
- iOS开发系统类功能划分
0.OC语法基础 CHOCBase Object C语法学习笔记(一) Object C语法学习笔记(二) 1.UI类 自定义控件程序运行流程 setNeedsLayOut和setNeedsDispl ...
- 20165219 2017-2018-2 《Java程序设计》第5周学习总结
20165219 2017-2018-2 <Java程序设计>第5周学习总结 课本知识总结 第7章 内部类与异常类 一 1 内部类:类的一种成员 2 外嵌类:包含内部类的类称为内部类的外嵌 ...