echarts雷达图线的样式_echarts雷达图大小自适应

var scoreImage = document.getElementById('scoreImage');var myChart =echarts.init(scoreImage);functiontest() {

myChart.setOption({

title: { text:null }, //隐藏图表标题

legend: { enabled: false }, //隐藏图例

tooltip : {

trigger:'axis'},

grid: {//控制图的大小，调整下面这些值就可以，

x: 40,

x2:100,

y2:150//y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上

},

calculable :true,

polar : [

{

nameGap :5, //图中工艺等字距离图的距离

splitNumber: 4, //网格线的个数

center:['50%','50%'], //图的位置

name:{

show:true, //是否显示工艺等文字

formatter: null, //工艺等文字的显示形式

textStyle: {

color:'#a3a5b6' //工艺等文字颜色

}

},

indicator : [

{text :'结构原理', max : 100},

{text :'机组检修', max : 100},

{text :'机组试车', max : 100},

{text :'机组操作', max : 100},

{text :'日常维护', max : 100},

{text :'异常处置', max : 100}

],

axisLine: {//坐标轴线

show: true, //默认显示，属性show控制显示与否

lineStyle: { //属性lineStyle控制线条样式

color: '#1e6db3',

width:1,

type:'solid'}

},

axisLabel: {//坐标轴文本标签，详见axis.axisLabel

show: false,/*formatter: function (value){

return "星期" + "日一二三四五六".charAt(value);

},*/interval:3,

textStyle: {

color:'#247bd7', //坐标轴刻度文字的样式

fontSize : "10px"}

},

splitArea : {

show :true,

areaStyle : {

color: ["#17365d"] //图表背景网格的颜色

}

},

splitLine : {

show :true,

lineStyle : {

width :1,

color :'#286fbb' //图表背景网格线的颜色

}

}

}

],

series : [

{

name:'完全实况球员数据',

type:'radar',

symbol:"none", //去掉图表中各个图区域的边框线拐点

itemStyle: {

normal: {

lineStyle: {

color:"rgba(255,255,255,0.5)" //图表中各个图区域的边框线颜色

},

areaStyle: {

type:'default'}

}

},

data : [

{

value : [50, 42, 88, 60, 90],

itemStyle: {

normal: {

areaStyle: {

type:'default',

opacity:0.6, //图表中各个图区域的透明度

color: "#1686c2" //图表中各个图区域的颜色

}

}

},

name :'重整'},

{

value : [90, 32, 74, 20, 60],

itemStyle: {

normal: {

areaStyle: {

type:'default',

opacity:0.6,

color:"#6eaf97" //图表中各个图区域的颜色

}

}

},

name :'催化'}

]

}

]

});

}

test();

$(window).resize(function() {//这是能够让图表自适应的代码

myChart.resize();

});