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

黑马程序员官方

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

阅读量1.4k

点赞数

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

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

版权

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

323 篇文章 235 订阅

订阅专栏

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

                                }

                        ]

                }

        ]

}

1.2.雷达图的常见效果

显示数值 label

区域面积 areaStyle

绘制类型 shape

雷达图绘制类型，支持 'polygon' 和 'circle'

'polygon' : 多边形

'circle' 圆形

1.3.雷达图的特点

雷达图可以用来分析多个维度的数据与标准数据的对比情况

2.仪表盘图

2.1.仪表盘的实现步骤

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

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

步骤2: 准备数据, 设置给 series 下的 data

data:[97]

步骤3: 在 series 下设置 type:gauge

2.2.仪表盘的常见效果

数值范围: max min
多个指针: 增加data中数组的元素
多个指针颜色的差异: itemStyle

2.3.仪表盘的特点

仪表盘可以更直观的表现出某个指标的进度或实际情况

往期文章：

黑马前端专栏干货多多，关注再学，好方便~

2022年前端学习路线图：课程、源码、笔记，技术栈另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~

黑马程序员官方

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ECharts常用图表雷达图、仪表盘图

另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~仪表盘可以更直观的表现出某个指标的。的数据与标准数据的对比情况。是一个空空如也的对象。雷达图绘制类型，支持。是一个空空如也的对象。定义各个维度的最大值。
复制链接

扫一扫