快捷搜索: 王者荣耀 脱发

echarts图表库 实现简单 雷达图

1.下载js文件

<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>

4.参考手册

经验分享 程序员 微信小程序 职场和发展