<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>雷达图例子</title>
<script src="js/echarts-all.js"></script>
</head>
<style>
#lei {
width: 500px;
height: 500px;
}
</style>
<body>
<div id="lei"></div>
<script>
var option = {
color: ["#379EFC", "#3ECDC3"],
title: {
text: '雷达图例子',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis',
formatter:function(parms){//改变悬浮框内容
console.log(parms)
var str="";
str+="<div style='text-align: center;'>"+parms[0].indicator+"</div>"
for(var i=0;i<parms.length;i++){
str+="<div>"+parms[i].name+"/"+parms[i].value+"</div>"
}
return str;
}
},
legend: {//图例
orient: 'vertical',
x: 'right',
y: 'bottom',
data: ['预算分配', '实际开销']
},
polar: [{ //雷达指标列表
indicator: [{
text: '销售',
max: 6000
},
{
text: '管理',
max: 16000
},
{
text: '信息技术',
max: 30000
},
{
text: '客服',
max: 38000
},
{
text: '研发',
max: 52000
},
{
text: '市场',
max: 25000
}
]
}],
calculable: false,//是否启用拖拽重计算特性
series: [{ //雷达图里面的数据
name: '例子',
type: 'radar',
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销'
}
]
}]
};
var myEcharts=echarts.init(document.getElementById("lei"))
myEcharts.setOption(option)
</script>
</body>
</html>
以上就是解决echarts 3.0版本 鼠标移动到雷达图的X轴坐标显示不了的方案
以下是实现后的样子