应项目需求需要实现以下效果(当然也是最终的实现):
接下来主要关于下面的几个参数进行设置
- 雷达图的圈数
- 雷达图支持绘制的类型:圆形和多角形
- 雷达图在容器中的位置:center决定也就是雷达图中心在容器的位置
- 雷达图每个方向的文字配置
- 雷达图每个方向的文字到雷达图的距离:指示器名称和指示器轴的距离。
- 雷达图中心发出的射线:坐标轴轴线相关设置
- 雷达图每一圈,这个圈的样式: splitLine坐标轴在 grid 区域中的分隔线
- 雷达图每一圈所分割出的区域的样式
- 雷达图每一个焦点的样式
- 雷达图每一个圈值,这个值组成的线的样式
- 关于echarts图例的具体配置说明.
- 关于echarts雷达图的具体配置项说明.
export default {
data() {
return {
selfRating:[4300, 10000, 28000, 35000, 50000],
seniorRating:[6000, 14000, 28000, 31000, 42000]
};
},
created() {},
mounted() {
var radar = echarts.init(document.getElementById("radar_container"));
// 绘制图表
var option = {
tooltip: {},
//图例
legend: {
type: "plain",//图例的类型
show: true,//是否显示图例
data: ["自我评分", "师兄评分"],
right: 40,
top: 230,
orient: "vertical",
itemGap: 29,
itemWidth: 19,
itemHeight: 7,
textStyle: {
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
},
},
radar: {
// shape: 'circle', //雷达图绘制类型(圆型和多角形),支持 'polygon' 和 'circle',默认 是'polygon'
splitNumber: 4, // 雷达图圈数设置
center:[220,180],//雷达图位置:中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
name: {//每个方向的文字配置:也就是,软件,业务,技能,素质,爱好这些字的配置
show: true,
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
// padding: [3, 5],
},
nameGap = 15 //指示器名称和指示器轴的距离。
axisLine: {
show: false, //雷达图中心发出的射线:坐标轴轴线相关设置
},
splitLine: {//雷达图每一圈,这个圈的样式
show: true,
lineStyle: {
type: "dashed"
}
},
splitArea: {// 雷达图每一圈所分割出的区域的样式
show: true
},
indicator: [
{ name: "软件", max: 6500},
{ name: "业务", max: 16000 },
{ name: "素质", max: 30000 },
{ name: "爱好", max: 38000 },
{ name: "技能", max: 52000 },
// { name: "市场", max: 25000 },
],
},
series: [
{
type: "radar",
// areaStyle: {normal: {}},
symbol: "circle", // 焦点的样式,还可以取值'rect','angle'等
symbolSize: 0, // 焦点的大小
data: [
{
value: this.selfRating,
name: "自我评分",
itemStyle: {//雷达图每一个焦点的样式
normal: {
color: "rgba(252, 154, 14, 1)",
lineStyle: {
color: "rgba(252, 154, 14, 1)",
},
},
},
},
{
value: this.seniorRating,
name: "师兄评分",
itemStyle: {
normal: {
color: "rgba(46, 90, 251, 1)",
lineStyle: {
color: "rgba(46, 90, 251, 1)",
},
},
},
},
],
},
],
};
radar.setOption(option);
},
methods: {},
computed: {},
};
具体的配置项说明可以参考11和12
eacharts想熟练只有一个方法,就是自己创建一个demo自己多常识:绝知此事须躬行
欢迎交流