ECharts常用图表雷达图、仪表盘图

原创

黑马程序员 2023-06-04 10:28:16 ©著作权

文章标签 echarts 前端 javascript 自学前端数据 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者黑马程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.雷达图

1.1.雷达图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang = "en" >
<head>
        <script src = "js/echarts.min.js" ></script>
</head>
<body>
        <div style = "width: 600px;height:400px" > </div>
        <script>
                var mCharts = echarts . init ( document . querySelector ( "div" ))
                var option = {}
                mCharts . setOption ( option )
        </script>
</body>
</html>

此时 option 是一个空空如也的对象

步骤2 定义各个维度的最大值

ECharts常用图表雷达图、仪表盘图_前端

步骤3 准备具体产品的数据

ECharts常用图表雷达图、仪表盘图_前端_02

步骤4 在 series 下设置 type:radar

var option = {
        radar : {
                indicator : dataMax
        },
        series : [
                {
                        type : 'radar' ,
                        data : [
                                {
                                        name : ' 华为手机 1' ,
                                        value : hwScore
                                },
                                {
                                        name : ' 中兴手机 1' ,
                                        value : zxScore
                                }
                        ]
                }
        ]
}

ECharts常用图表雷达图、仪表盘图_echarts_03