一、echarts雷达图使用
echarts雷达图可以展示多维度数据之间的关系，可以使用在各种领域的数据展示，例如业绩展示、投资分析等。首先，需要引入echarts的js库文件和所需的主题文件，以及一个DOM容器
<script src="./echarts.min.js"></script>
<div id="chart"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
</script>
接下来，需要配置雷达图的数据信息
// 配置雷达图的数据
var option = {
title: {
text: 'echarts雷达图示例'
},
tooltip: {},
legend: {
data:['预算分配','实际开销']
},
radar: {
// 雷达图坐标系组件
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '市场', max: 25000}
]
},
series: [{
name: '预算 vs 开销(Allocated Budget vs Actual Spending)',
type: 'radar',
// 数据
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配',
// 单个数据项的样式配置
itemStyle: {color: '#104E8B'}
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销',
// 单个数据项的样式配置
itemStyle: {color: '#00FF00'}
}
]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
这样我们就成功创建了一个雷达图，可以根据所需的数据进行修改配置，以展现不同效果。
二、echarts雷达图怎么放大缩小
echarts提供了一个组件dataZoom，可以进行放大缩小。dataZoom会默认出现在图表的底部，可以通过修改show属性控制其关闭或开启。除此之外，也可以设置其具体的位置、样式等属性。
var option = {
...
dataZoom: {
// 控制缩放的范围
rangeMode: ['percent', 'percent'],
// 默认的起始范围是50%到100%
start: 50,
end: 100
},
...
};
三、echarts雷达图样式修改
echarts雷达图可以通过在样式中配置series进行样式修改
var option = {
...
series: [{
// 填充样式
areaStyle: {color: '#FFFFFF'},
// 样式深度
emphasis: {
focus: 'self', // 当前的系列和数据项本身都会被强调
itemStyle: {color: '#FFFFFF'},
lineStyle: {color: '#FFFFFF'}
},
// 文本样式
label: {
fontSize: 14
},
// 折线图的样式设置
lineStyle: {
width: 1,
type: 'dotted'
}
}]
...
};
四、echarts雷达图超出圆盘
当数据项过多，超出了雷达图的圆盘范围，可以通过修改grid下的left、right、top、bottom实现圆盘范围的扩大。或者可以通过调整雷达图坐标系组件radar项中的center值，控制图表的半径，使得图表格局更为紧凑。
var option = {
...
grid: {
// 控制整个图表所占的位置
left: '10%',
right: '20%',
top: '10%',
bottom: '10%'
},
radar: {
center: ['50%', '50%'], // 修改center进行半径控制
...
},
...
};
五、echarts雷达图上下限设置
可以设置雷达图的最大和最小刻度，使得数据不会超过设定范围，可以通过修改radar中indicator中的max、min控制。
var option = {
...
radar: {
indicator: [
{ name: '销售', max: 6500, min: 0},
...
]
...
},
...
};
六、echarts雷达图好看的配置
可以通过样式配置和图表元素的显示和隐藏控制实现一些炫酷的展现效果，以下为理想的echarts雷达图的配置
var option = {
title: {
text: 'ecs展示'
},
tooltip: {},
legend: {
data: ['预算分配', '实际开销']
},
radar: {
center: ['50%', '50%'],
indicator: [
{ name: '综合评价', max: 100},
{ name: '成本控制', max: 100},
{ name: '效率绩效', max: 100},
{ name: '技术能力', max: 100},
{ name: '品质服务', max: 100},
{ name: '销售占比', max: 100}
],
radius: '65%',
splitNumber: 8,
name: {
textStyle: {
color: '#999',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#989898','#B4B4B4','#CDCDCD','#E1E1E1','#F5F5F5','#F7F7F7','#FFFFFF']
}
}
},
series: [{
type: 'radar',
data: [
{
value: [70, 80, 85, 90, 85, 80],
name: '预算分配',
itemStyle: {color: '#f28c00'},
lineStyle: {color: '#f28c00'}
},
{
value: [60, 70, 80, 90, 75, 95],
name: '实际开销',
itemStyle: {color: '#0070c0'},
lineStyle: {color: '#0070c0'},
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
}
]
}]
};
myChart.setOption(option);
七、echarts雷达图取消默认线条
echarts雷达图的默认显示了样式较为复杂的线条，可以通过设置lineStyle项为null取消其默认显示的线条。样式可以通过itemStyle项进行控制，或者通过修改起始和结束颜色实现样式颜色渐变。
var option = {
...
series: [{
// 取消默认线条
lineStyle: null,
data: [
...
]
}]
...
};
八、echarts雷达图设置大小
echarts雷达图的大小可以通过设置容器div的width和height属性实现。如果需要动态改变雷达图的大小，可以通过调用echart的resize()方法实现。可以通过修改radar中center和radius等属性控制图表所占的位置和大小。
// 将容器的高设置为500px，宽设置为1000px
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304291.html
微信扫一扫 
支付宝扫一扫 