您的位置:首页 > Web前端 > JavaScript

echarts图表库 实现简单 雷达图

2016-11-09 22:54 344 查看
1.下载js文件 http://echarts.baidu.com/download.html

<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.效果图



4.参考手册

http://echarts.baidu.com/echarts2/doc/doc.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息