echarts圖表庫 實現簡單 雷達圖
阿新 • • 發佈:2019-01-03
<script type='text/javascript' src="js/echarts.js" charset='utf-8'></script>
2.核心程式碼
<div id="sixStart" style="width:1323px; height:1300px;text-align: center;"></div>
<!-- 注意:div一定要設定寬 和 高,原因不明,不信你試試 -->
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('sixStart' ));
var option = {
title : {
},
tooltip : {
trigger: 'axis'
},
calculable : true,
polar : [
{
name: { show: true,textStyle:{fontSize:16,color:"#32cd32"}},
indicator : [
{text : '解決問題' , max : 100},
{text : '學習能力', max : 100},
{text : '綜合', max : 100},
{text : '技術能力', max : 100},
{text : '業務能力', max : 100},
{text : '思維模式', max : 100}
],center : ['50%' ,'50%'],
radius : 500 //半徑,可放大放小雷達圖
}
],
series : [
{
name:'',
type: 'radar',//圖表型別 radar為雷達圖
itemStyle: {
normal: {
lineStyle: {
color :"#87cefa",
width : 2
},
areaStyle: {
color:"#87cefa",
type: 'default'
}
}
},
symbolSize :6,
data : [{
value:[100,80,80,80,80,80]
}]
}
]
};
$(function(){
myChart.setOption(option);
});
</script>
3.效果圖