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

黑马程序员官方

于 2022-12-12 16:16:27 发布

阅读量1.4k

点赞数

分类专栏： 2023年前端—入门到精通文章标签： echarts 前端 javascript 自学前端

本文链接：https://blog.csdn.net/itcast_cn/article/details/128286215

版权

2023年前端—入门到精通专栏收录该内容

323 篇文章 239 订阅

订阅专栏

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 定义各个维度的最大值

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

步骤4 在 series 下设置 type:radar

var option = {

        radar : {

                indicator : dataMax

        },

        series : [

                {

                        type : 'radar' ,

                        data : [

                                {

                                        name : ' 华为手机 1' ,

                                        value : hwScore

                                },

                                {

                                        name : ' 中兴手机 1' ,

                                        value : zxScore

                                }

                        ]

                }

        ]

}