天天看点

Echarts配置项-3

配置项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.inRange 和 visualMap.outOfRange)中。

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

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

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

    【分段型】
    连续型数据平均分段 splitNumber 
    连续型数据自定义分段 pieces 
    离散数据根据类别分段 categories 
           
Echarts配置项-3

✦ 与 ECharts2 中 dataRange 的关系 ✦

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

splitNumber 连续型平均分段案例

Echarts配置项-3

pieces 连续型自定义分段案例

Echarts配置项-3

categories 离散数据根据类别分段

Echarts配置项-3

tooltip 提示框组件

提示框组件的通用介绍:

可以设置在全局,即 tooltip

可以设置在坐标系中,即 grid.tooltip、polar.tooltip、singleAxis.tooltip

可以设置在系列中,即 series.tooltip

可以设置在系列的每个数据项中,即 series.data.tooltip

全局 tooltip 点击查看实例

Echarts配置项-3

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

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

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

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

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

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

继续阅读