H5--图表操作--雷达图

 

html:======

 <div id="container2" style="width: 100%;height: 300px;margin-bottom: 10px"></div>

js:=============================== start   ===================

function allradar(data,array){
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
color: ['#ED7374', '#45B459', '#3585BA'],
// ED73374 45B459 3585BA
tooltip: {},
legend: {
show:false,
width :255,
height:430,
data: ['',' ',' ',' ']
},
radar: {
splitNumber: 5,
splitArea: {
areaStyle: {
color: ['#ccc','#fff', '#ccc', '#fff', '#ccc']
}
},
name: {
formatter: function (value, indicator) {
return value.substr(0,2) +'\n' + value.substr(2,4);
},
textStyle: {
color: '#000',
fontSize: 12,
borderRadius: 3,
padding: [3, 5]
}
},
radius :'50%',
indicator: [
{ name: '金融'},
{ name: '资产'},
{ name: '消费'},
{ name: '行为'},
{ name: '生活'}
]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
// itemStyle: {normal: {areaStyle: {type: 'default'}}},
data : [

{
value :data7,
color:'#fff',
name : '7天'
},
{
value : data90,
color:'#fff',
name : '90天'
},
{
value : data180,
color:'#fff',
name : '180天'
}
]
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}

 

js:=============================== END  ===================

转载于:https://www.cnblogs.com/lipuqing180906/p/10313529.html