记录以前第一次使用Echarts实现的雷达图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts雷达图</title>
</head>
<style>
#echartsid{
width: 400px;
height: 400px;
}
</style>
<body>
<div id='app'>
<div id="echartsid"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
var Vue = new Vue({
el: '#app',
data: {
},
created() {
},
mounted() {
let a=[70,75,90,85,90]
let b=[90,85,80,75,70]
this.getMixChart(a, b)
},
methods: {
//Echarts雷达图的实现
getMixChart(a, b) {
var myChart = echarts.init(document.getElementById('echartsid'));
var option = {
title: {
text: '基础雷达图',
x:'center',
y:'top',
textAlign: 'left'
},
radar: {
// shape: 'circle',
center: ['50%', '50%'], // 位置
radius: 110, //大小
name: {
textStyle: {
color: '#999',
}
},
indicator: [{
name: '老客户增长值',
max: 100,
},
{
name: '新客户增长值',
max: 100
},
{
name: '业绩完成率',
max: 100
},
{
name: '精细化完成率',
max: 100
},
{
name: '账号达标率',
max: 100
},
],
triggerEvent: true //开启雷达图的边角名称可点击
},
series: [{
name: '团队 vs 个人',
type: 'radar',
// areaStyle: {normal: {}},
data: [{
value: b,
name: '团队',
lineStyle: { // 五点连接线的样式。
normal: {
opacity: 1, // 图形透明度,
color: '#EB808C'
}
}
},
{
value: a,
name: '个人',
lineStyle: { // 五点连接线的样式。
normal: {
opacity: 1, // 图形透明度,
color: '#007F7F'
}
}
}
]
}]
};
myChart.setOption(option)
},
}
})
</script>
</html>
注意：
echarts需在页面挂载完成之后也就是mounted钩子函数中实例化
echarts挂载的节点需要设置宽高
我这里是 5个维度，两组数据，如需修改则在 indicator 和series.data 中修改
