Echarts配置项-3

本文详细介绍了Echarts中的配置项,重点讲解了visualMap组件如何进行视觉编码,将数据映射到不同视觉元素,如颜色、大小等,并提到了其与dataRange的关系。同时,还讨论了tooltip组件的用法,包括全局、坐标系和系列中的配置,以及formatter和rich的配合使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

配置项setOption()


全局配置


visualMap 视觉映射组件,用于进行【视觉编码】,也就是将数据映射到视觉元素(视觉通道)

视觉元素可以是:

symbol - 图元的图形类别
symbolSize - 图元的大小
color - 图元的颜色
colorAlpha - 图元的颜色透明度
opacity - 图元以及其附属(如文字标签)的透明度
colorLightness - 颜色的明暗度,参见 HSL
colorSaturation - 颜色的饱和度,参见 HSL
colorHue - 颜色的色调,参见 HSL

visualMap 官方实例 连续型visualMap 官方实例 分段型

// visualMap 有两种类型,连续型 与 分段型,通过type来区分
visualMap: [
    {
        // 第一个 visualMap 组件,连续型
        type: 'continuous'
    },
    {
        // 第二个 visualMap 组件,分段型
        type: 'piecewise'
    }
]

✦ 视觉映射方式的配置 ✦

既然是【数据】到【视觉元素】的映射,visualMap中可以指定数据的【哪个维度】,参见 visualMap.dimension 映射到哪些【视觉维度】,(参见visualMap.inRangevisualMap.outOfRange)中。


在 visualMap 组件所控制的 series 中,如果 series 中某个数据项需要 避开 visualMap 映射,可以这么配置:

series: [
    {
        name:'Beijing', 
        value: 251,
    },
    {
        name: 'Chongqing',
        value: 242,
    },
    // 设置 `visualMap: false` 则 visualMap 不对此项进行控制,此时系列
    // 可使用自身的视觉参数(color/symbol/ ...控制此项的显示。
    {
        name: 'Wanzhou',
        value: 52,
        visualMap: false,
    }
]
PS: 以上的 series 中的数据可以用data数组来显示,见下图黑色data数据
    配置最基本的只需要 visualMap 与 series 就行,【其他的都是修饰其界面】

    【连续型】
    visualMap.calculable 来显示和隐藏手柄(能手动拖动改变值域)

    【分段型】
    连续型数据平均分段 splitNumber 
    连续型数据自定义分段 pieces 
    离散数据根据类别分段 categories 

这里写图片描述

✦ 与 ECharts2 中 dataRange 的关系 ✦

visualMap 是由 ECharts2 中的 dataRange 组件 改名以及扩展 而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容,会自动转换成 visualMap 配置项。在option中 推荐visualMap 而非 dataRange。


splitNumber 连续型平均分段案例

这里写图片描述


pieces 连续型自定义分段案例

这里写图片描述


categories 离散数据根据类别分段

这里写图片描述


tooltip 提示框组件

提示框组件的通用介绍:

可以设置在全局,即 tooltip
可以设置在坐标系中,即 grid.tooltippolar.tooltipsingleAxis.tooltip
可以设置在系列中,即 series.tooltip
可以设置在系列的每个数据项中,即 series.data.tooltip


全局 tooltip 点击查看实例

这里写图片描述


坐标系中 grid.tooltip 暂无实例,抽空可以找找 需要看特定配置点击这儿

系列中 series.tooltip 暂无实例,抽空可以找找 需要看特定配置点击这儿

系列的每个数据中 series.data.tooltip 暂无实例,抽空可以找找 需要看特定配置点击这儿


PS: tooltip 一般用于全局中比较多,特定的系列有各自特定的效果及配置,使用比较窄。
    使用 tooltip 中用得最多的 formatter 需要多看看。

formatter和rich只有官网上的配置项里面有对应的属性才能配合一起使用;tooltip中的formatter中不能配合rich使用。


每日一更Echarts,每日一点小积累…

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值