echarts图表库实现简单雷达图

最新推荐文章于 2025-04-12 23:16:47 发布

大叔的味道

最新推荐文章于 2025-04-12 23:16:47 发布

阅读量1.7w

点赞数 1

分类专栏： javascript 文章标签： echarts 雷达图图表 javascript

本文链接：https://blog.csdn.net/z834410038/article/details/53107116

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

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>