Echarts关于雷达图的一些个性化设置
function test() {
let myChart = echarts.init(document.getElementById('levelImage'));
myChart.setOption({
title: { text:null }, // 隐藏图表标题
legend: { enabled: false }, // 隐藏图例
tooltip : {
trigger: 'axis'
},
calculable : true,
polar : [
{
nameGap : 5, // 图中工艺等字距离图的距离
center:['50%','50%'], // 图的位置
name:{
show: true, // 是否显示工艺等文字
formatter: null, // 工艺等文字的显示形式
textStyle: {
color:'#a3a5b6' // 工艺等文字颜色
}
},
indicator : [
{text : '工艺', max : 100},
{text : '设备', max : 100},
{text : '安全', max : 100},
{text : '工艺', max : 100},
{text : '仪表', max : 100}
],
axisLine: { // 坐标轴线
show: false // 默认显示，属性show控制显示与否
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: false,
textStyle: {
color: '#247bd7' // 坐标轴刻度文字的样式
}
},
splitArea : {
show : true,
areaStyle : {
color: ["#2a4a93"] // 图表背景网格的颜色
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#286fbb' // 图表背景网格线的颜色
}
}
}
],
series : [
{
name: '完全实况球员数据',
type: 'radar',
symbol: "none", // 去掉图表中各个图区域的边框线拐点
itemStyle: {
normal: {
color : "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
lineStyle: {
color:"white" // 图表中各个图区域的边框线颜色
},
areaStyle: {
type: 'default'
}
}
},
data : [
{
value : [50, 42, 88, 60, 90],
itemStyle: {
normal: {
areaStyle: {
type: 'default',
opacity: 0.8, // 图表中各个图区域的透明度
color: "#1686c2" // 图表中各个图区域的颜色
}
}
},
name : '重整'
},
{
value : [90, 32, 74, 20, 60],
itemStyle: {
normal: {
areaStyle: {
type: 'default',
/*opacity: 1,*/
color: "#6eaf97" // 图表中各个图区域的颜色
}
}
},
name : '催化'
}
]
}
]
});
}
test();
Echarts关于雷达图的一些个性化设置相关推荐
- JS Echarts之雷达图 | 使用Excel画雷达图
文章目录 第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改 修改in ...
- echarts雷达图文字不显示_ECharts雷达图指示器名称的设置
radar.name | Object 雷达图每个指示器名称的配置项. radar.name.show | boolean [ default: true ] 是否显示雷达图指示器的名 ...
- 使用echarts实现雷达图
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
- echarts radar雷达图常规使用
<div id="idRadar"></div> data() {return {// 雷达图optionRadar: {color: '#1890FF', ...
- echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
- echarts自定义雷达图（radar）
先来个效果图 1.首先设置形状 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon 2.设置线条 splitLine: { ...
- 【PHPWord】PHPWord生成图表-雷达图 | 隐藏图例、设置数值类别隐藏、展示多组数据
目录 预计达到的效果 什么是雷达图 在Word中如何生成雷达图 使用Chart生成雷达图 宽度和高度的单位都是EMU legend 图例 简单示例 美化样式 颜色设置Colors无效 无法配置数值最小 ...
- 关于echarts的雷达图比较详细的参数说明
要实现的效果图如下: 接下来主要关于下面的几个参数进行设置 1. 雷达图的圈数 2. 雷达图每圈上面的数字 3. 雷达图区域拐点的数值 4. 雷达图拐点的样式 5. 雷达图每个区域的颜色设置 6. 雷 ...
最新文章
- 小编说之“常见问题答疑”
- 干货回顾丨深度学习应用大盘点
- 离线轻量级大数据平台Spark之MLib机器学习库朴素贝叶斯实例
- Android进阶：一、日志打印和保存策略
- jithub使用整理资料
- android web canvas,HTML5 - Canvas无法在Android WebView的第一次加载时渲染
- Ubuntu 安装git服务器
- 数据分析入门——深入浅出数据分析
- px和毫米之间的转换
- php微信公众号回复换行,PHP 微信公众号开发，关键字回复使用switch出错
- 计算机c盘如何扩容,C盘空间不足怎么办？4种方法获得更多空间！
- HTML之基本布局设计之三栏式、两栏式设计
- android显示动态图片,android显示gif图
- 2021年饶州中学高考成绩查询,鄱阳饶州中学2019高考成绩喜报、一本二本上线人数情况...
- 《3D ISP核心技术算法》系列（1）——ToF测量中的多径现象与消除方法
- 【Cartographer参数详解，调参，降低计算量调优笔记记录】
- Problem E: 求方程ax^2+bx+c=0的实数根
- 前端工具webpack-打包优化-第1篇
- java geometry mysql_Java Geometry空间几何数据的处理应用
- win10无法连接这个网络的解决方案【亲测有效】