echarts 雷达图的个性化设置
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 雷达图的个性化设置的更多相关文章
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 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 雷达图怎么在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
- ECharts雷达图详细配置说明
雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...
- WPF DevExpress 设置雷达图Radar样式
DevExpress中定义的ChartControl很不错,很多项目直接使用这种控件. 本节讲述雷达图的样式设置 <Grid> <Grid.Resources> <D ...
- Echarts4.x雷达图如何展示一维数据?
最近做的项目其中一个功能是画雷达图,鼠标滑过雷达图的拐点,展示该维相关数据,并且需要显示雷达图的刻度. 但是我发现单纯的雷达图似乎没办法展示一维数据. 我总结了一下,关于画雷达图,我遇到的难点有三个: ...
- 用pChart生成雷达图图片
需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- 4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程)
4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程) (2016-02-01 03:21:06) 转载▼ 标签: delphi ios delphi10 教程 编程 分类: 编程 ...
- wsdl 结构解析
webservice的跨平台特性要求它必须有某种手段来对服务进行自我描述,使不同的语言能正确理解如何调用该服务.webservice通过WSDL(Web Services Description La ...
- 程序员MAC必备
排名不分先后 • iTerm 2 终端工具(建议配合oh-my-zsh使用) • Shadowsocks ***工具 (可用于FQ) • Foxmail 邮箱工具 (适用于企业邮箱登陆) • ...
- 让Easy UI 的DataGrid直接内嵌的JSON对象,并重写form load 方法
前言 我有这样的JSON对象 { "UserName": "jf", "UserPwd": "123456", &quo ...
- ASP.NET MVC 4 中Razor 视图中JS无法调试
解决方法 1.首先检查IE中这2个属性是否勾选了. 2.选择IE浏览器进行调试,调试方法有2种 A:采用debugger;的方法,如下图所示: 这时不用调试断点就会在debugger位置中命中 ...
- Asp.Net分页生成页码超链接方法
namespace Common { public class PageLinkHelp { /// <summary> /// 生成分页超链接标签 /// 使用了Bootstrap3的分 ...
- AI贪吃蛇前瞻——基于Dijkstra算法的最短路径问题
在贪吃蛇流程结构优化之后,我又不满足于亲自操刀控制这条蠢蠢的蛇,干脆就让它升级成AI,我来看程序自己玩,哈哈. 一.Dijkstra算法原理 作为一种广为人知的单源最短路径算法,Dijkstra用于求 ...
- java 处理json格式数据中的转义斜杠
1.{\"Count\":\"3\",\"ErrorString\":\"\",\"Success\" ...
- 程序媛计划——python初级课时3~5
产生1-10中的随机数: for 循环:所有可遍历对象都能用于for循环,如一个字符串. len(list),list中的元素类型可以各不相同:可以直接用下标对list元素赋值来更新列表 对字符串可以 ...
- 782. Transform to Chessboard
An N x N board contains only 0s and 1s. In each move, you can swap any 2 rows with each other, or an ...