echarts雷达图 echart雷达图 雷达图
echarts雷达图echart雷达图雷达图
·
普通雷达图
var legendData = ['高一(1)班', '高一(2)班']; //图例
var indicator = [{
text: '二面角的定义',
max: 30,
},
{
text: '正棱锥的定义',
max: 30
},
{
text: '二面角的面',
max: 30
},
{
text: '直二面角',
max: 30,
// axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
},
{
text: '棱锥的定义',
max: 30
},
{
text: '棱锥的性质',
max: 30
}
];
var dataArr = [{
value: [28, 12, 17 ,18, 10, 12],
name: legendData[0],
itemStyle: {
normal: {
lineStyle: {
color: '#4A99FF',
// shadowColor: '#4A99FF',
// shadowBlur: 10,
},
shadowColor: '#4A99FF',
shadowBlur: 10,
},
},
areaStyle: {
normal: { // 单项区域填充样式
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [{
offset: 0,
color: '#4A99FF'
}, {
offset: 0.5,
color: 'rgba(0,0,0,0)'
}, {
offset: 1,
color: '#4A99FF'
}],
globalCoord: false
},
opacity: 1 // 区域透明度
}
}
},
{
value: [6, 11, 15, 14, 20, 16],
name: legendData[1],
itemStyle: {
normal: {
lineStyle: {
color: '#4BFFFC',
// shadowColor: '#4BFFFC',
// shadowBlur: 10,
},
shadowColor: '#4BFFFC',
shadowBlur: 10,
},
},
areaStyle: {
normal: { // 单项区域填充样式
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [{
offset: 0,
color: '#4BFFFC'
}, {
offset: 0.5,
color: 'rgba(0,0,0,0)'
}, {
offset: 1,
color: '#4BFFFC'
}],
globalCoord: false
},
opacity: 1 // 区域透明度
}
}
}
];
var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
option = {
backgroundColor: '#101736',
title: {
show: false,
text: "数学薄弱知识点分析",
x: "4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
color: colorArr,
legend: {
orient:'vertical',
icon: 'circle', //图例形状
data: legendData,
bottom:35,
right:40,
itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
textStyle: {
fontSize: 14,
color: '#00E4FF',
},
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
fontSize: 16
},
},
indicator: indicator,
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
axisLine: { //指向外圈文本的分隔线样式
lineStyle: {
color: '#153269'
}
},
splitLine: {
lineStyle: {
color: '#113865', // 分隔线颜色
width: 1, // 分隔线线宽
}
},
},
series: [{
type: 'radar',
symbolSize: 8,
// symbol: 'angle',
data: dataArr
}]
};
圆形雷达图
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
const indicator = [
{
text: '文明村',
min: 0,
max: 100
},
{
text: '卫生村',
min: 0,
max: 100
},
{
text: '森林村庄',
min: 0,
max: 100
},
{
text: '全面小康',
min: 0,
max: 100
},
{
text: '景区村庄',
min: 0,
max: 100
}
]
const Data = [80,61,70,86,77]
function setData() {
return [
{
value: Data,
itemStyle: {
normal: {
lineStyle: {
color: '#4BFFFC',
shadowColor: '#4BFFFC',
shadowBlur: 5
},
shadowColor: '#4BFFFC',
shadowBlur: 5
}
},
areaStyle: {
normal: {
// 单项区域填充样式
color: {
type: 'radial',
x: 0.5, //右
y: 0.5, //下
r: 1,
colorStops: [
{
offset: 1,
color: '#4BFFFC'
},
{
offset: 0,
color: 'rgba(0,0,0,0)'
}
],
globalCoord: false
},
opacity: 0.8 // 区域透明度
}
}
}
]
}
function setgauge(i) {
return {
type: 'gauge',
detail: false,
splitNumber: 10, //刻度数量
radius: '80%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#66ccff',
width: 1
},
length: 6,
splitNumber: 1
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}
}
function setSpot() {
var scatterData = []
Data.map((o, i) => {
scatterData.push({
value: [o, i],
itemStyle: {
normal: {
color: color[i],
borderColor: '#fff',
borderWidth: 1,
shadowColor: color[i],
shadowBlur: 8
}
}
})
})
return scatterData
}
option = {
backgroundColor: '#0E1327',
polar: {
center: ['50%', '50%'],
radius: '60%'
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: indicator,
axisName: {
color: '#b7e9fd',
fontSize: 24,
padding: -10
},
nameGap: 45,
splitNumber: 4,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 25,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
axisLabel: {
fontSize: 12,
color: '#5aa3d0',
align: 'left',
margin: -5
}
},
series: [
setgauge(0),
setgauge(1),
setgauge(2),
setgauge(3),
setgauge(4),
{
type: 'radar',
silent: true,
lineStyle: {
color: '#66ffff'
},
areaStyle: {
color: 'rgba(102, 255, 255, 0.31)'
},
data: setData()
},
{
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 20,
data: setSpot()
}
]
};
demo来源echarts、Makepie社区
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
1- 0
已为社区贡献5条内容
所有评论(0)