echarts.js实现雷达图
本次小编要介绍的是雷达图画法与需求注意的点。
一、雷达图插件的引用
首先引用echarts.js 与jquery.js
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.3.1.js"></script>
二、在html中写出一个容器
<div id="chart" style="height: 450px;width: 450px"></div>
三、写雷达图所用到的参数,并把参数放入容器中
<script>
var radar_chart = echarts.init(document.getElementById("chart"));
var option = {
title: {
text: '基础雷达图'
},
tooltip: {},
// legend: {
// data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
// },
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '市场', max: 25000}
]
},
series: [{
// name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
// areaStyle: {normal: {}},
itemStyle: {
normal: {
color: '#a8bcd4'
}
},
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配(Allocated Budget)'
},
// {
// value : [5000, 14000, 28000, 31000, 42000, 21000],
// name : '实际开销(Actual Spending)'
// }
]
}]
};
radar_chart.setOption(option);
</script>
四、结果如下
五、可能用到的点
1、雷达图线的颜色
itemStyle: {
normal: {
color: '#a8bcd4'
}
},
在例子中有用到
2、雷达图文字改变颜色
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
改变背景色与文字颜色
3、一张画布画出多个雷达图,并且可以切换
把注释都放开,就可呈现出多个雷达图,并可以通过点击进行切换