echarts镭射图_Echarts - 雷达图（用过的属性）

option ={

title: {//标题

text: "基础雷达图"},

tooltip: {//提示框

confine: true,

backgroundColor:"#fff",

textStyle: {

color:"#333",

fontSize:16,

lineHeight:16},

padding:15,

borderWidth:1,

borderColor:"e1e3ec",

axisPointer: {

drossStyle: {

color:"#999"}

},

extraCssText:"box-shadow: 0 0 0.05rem 0 rgba(0, 0, 0, 0.1)" //自定义属性

},

color: ["#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"],

legend: {//图例

show: true,

data: ["预算分配(Allocated Budget)", "实际开销(Actual Spending)"]

},

radar: {//雷达图专用属性

shape: "circle", //"polygon"多边形，"circle"圆型

name: {

textStyle: {

color:"#333",

backgroundColor:"#fff",

borderRadius:3,

fontSize:16,

padding: [3, 5]

}

},

indicator: [//指示器

{ name: "销售(sales)", max: 6500},

{ name:"管理(Administration)", max: 16000},

{ name:"信息技术(Information Techology)", max: 30000},

{ name:"客服(Customer Support)", max: 38000},

{ name:"研发(Development)", max: 52000},

{ name:"市场(Marketing)", max: 25000}

],

nameGap:15, //指示器名称和指示器轴的距离。

splitNumber: 5, //指示器轴的分割段数。

axisLine: { //坐标轴轴线相关设置。

lineStyle: {

color:"rgba(204, 204, 204, 0.5)"}

},

axisTick: {//坐标轴刻度相关设置。

},

axisLabel: {//坐标轴刻度标签的相关设置。

},

splitLine: {//坐标轴在 grid 区域中的分隔线

lineStyle: {

color:"rgba(204, 204, 204, 0.5)"}

},

splitArea: {//坐标轴在 grid 区域中的分隔区域 (背景色)

show: false}

},

series: [{

name:"预算 vs 开销(Budget vs spending)",

type:"radar",

symbol:"circle", //标记的图形:"circle", "rect", "roundRect", "triangle", "diamond", "pin", "arrow", "none"

symbolSize: 4,

symbolRotate:0, //标记的旋转角度。注意在 markLine 中当 symbol 为 "arrow" 时会忽略 symbolRotate 强制设置为切线的角度。

emphasis: { //高亮的样式设置

lineStyle: {

width:3,

shadowOffsetX:1,

shadowOffsetY:1,

shadowBlur:8,

shadowColor:"rgba(0, 0, 0, 0.2)"}

},

areaStyle: {//区域填充样式。(不写，默认不绘制)

color: "#000",

opacity:0.1, //0时，为不绘制图形

},

lineStyle: {

normal: {

width:1}

},//radarIndex: 0, // 多个雷达图时，分配数据用

data: [{

value: [4300, 10000, 28000, 35000, 50000, 19000],

name:"预算分配(Allocated Budget)",

lineStyle: {//样式可以单独设置，也可以一起设置

normal: {

width:2}

},

itemStyle: {

normal: {

color:"#e82821"}

}

},

{

value: [5000, 14000, 28000, 31000, 42000, 21000],

name:"实际开销(Actual Spending)"}

]

}]

};