echarts雷达图大小自适应

结合了媒体查询

首先在css样式表中写出你希望雷达图在不同分辨率下的大小

@media screen and (max-height:780px){
    .left-score-image {
        width: 190px;
        height: 135px;
        margin-left: 36px;
        margin-top: 10px;
    }
}

其次，在js文件中加入

var scoreImage = document.getElementById(\'scoreImage\');
        var myChart = echarts.init(scoreImage);
        function test() {       
            myChart.setOption({
                title: { text:null }, // 隐藏图表标题
                legend: { enabled: false }, // 隐藏图例
                tooltip : {
                    trigger: \'axis\'
                },
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 40,
                    x2: 100,
                    y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                calculable : true,
                polar : [
                    {
                        nameGap : 5, // 图中工艺等字距离图的距离
                        splitNumber: 4, // 网格线的个数
                        center:[\'50%\',\'50%\'], // 图的位置
                        name:{
                           show: true, // 是否显示工艺等文字
                           formatter: null, // 工艺等文字的显示形式
                           textStyle: {
                             color:\'#a3a5b6\' // 工艺等文字颜色
                           }
                         },
                        indicator : [
                            {text : \'结构原理\', max  : 100},
                            {text : \'机组检修\', max  : 100},
                            {text : \'机组试车\', max  : 100},
                            {text : \'机组操作\', max  : 100},
                            {text : \'日常维护\', max  : 100},
                            {text : \'异常处置\', max  : 100}
                        ],
                        axisLine: {            // 坐标轴线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: \'#1e6db3\',
                                width: 1,
                                type: \'solid\'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            /*formatter: function (value){
                                return "星期" + "日一二三四五六".charAt(value);
                            },*/
                            interval: 3,
                            textStyle: {       
                                color: \'#247bd7\', // 坐标轴刻度文字的样式
                                fontSize : "10px" 
                            }
                        },
                        splitArea : {
                            show : true,    
                            areaStyle : {
                                color: ["#17365d"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : \'#286fbb\' // 图表背景网格线的颜色
                            }
                        }
                    }
                ],
                series : [
                    {
                        name: \'完全实况球员数据\', 
                        type: \'radar\',
                        symbol: "none", // 去掉图表中各个图区域的边框线拐点
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color:"rgba(255,255,255,0.5)" // 图表中各个图区域的边框线颜色
                                },
                                areaStyle: {
                                    type: \'default\'
                                }
                            }
                        },
                        data : [
                            {
                                value : [50, 42, 88, 60, 90],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: \'default\',
                                            opacity: 0.6, // 图表中各个图区域的透明度
                                            color: "#1686c2" // 图表中各个图区域的颜色
                                        }
                                    }
                                },
                                name : \'重整\'
                            },
                            {
                                value : [90, 32, 74, 20, 60],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: \'default\',
                                            opacity: 0.6,
                                            color: "#6eaf97" // 图表中各个图区域的颜色
                                        }
                                    }
                                },
                                name : \'催化\'
                            }
                        ]
                    }
                ]
            }); 
        }
        test();
        $(window).resize(function() {//这是能够让图表自适应的代码
            myChart.resize();
        });