实现一个不太常见的统计图,可拖拽漫游

如下图所示

 使用echarts5.3.0, 一些可能会涉及到的参数:

visualMap

  • 分段型视觉映射组件(visualMapPiecewise)

分段型视觉映射组件,有三种模式:

自定义『分段式视觉映射组件(visualMapPiecewise)』的每一段的范围,以及每一段的文字,以及每一段的特别的样式。例如:

pieces: [
    {min: 1500}, // 不指定 max,表示 max 为无限大(Infinity)。
    {min: 900, max: 1500},
    {min: 310, max: 1000},
    {min: 200, max: 300},
    {min: 10, max: 200, label: '10 到 200(自定义label)'},
    {value: 123, label: '123(自定义特殊颜色)', color: 'grey'}, // 表示 value 等于 123 的情况。
    {max: 5}     // 不指定 min,表示 min 为无限大(-Infinity)。
]

或者,更精确得,可以使用 lt(小于,less than),gt(大于,greater than),lte(小于等于 less than or equals),gte(大于等于,greater than or equals)来表达边界:

pieces: [
    {gt: 1500},            // (1500, Infinity]
    {gt: 900, lte: 1500},  // (900, 1500]
    {gt: 310, lte: 1000},  // (310, 1000]
    {gt: 200, lte: 300},   // (200, 300]
    {gt: 10, lte: 200, label: '10 到 200(自定义label)'},       // (10, 200]
    {value: 123, label: '123(自定义特殊颜色)', color: 'grey'},  // [123, 123]
    {lt: 5}                 // (-Infinity, 5)
]
  • 连续型视觉映射组件(visualMapContinuous)经过研究用不到

dataZoom

dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。

现在支持这几种类型的 dataZoom 组件:

 

posted @ 2022-03-05 22:24  只做你的向日葵  阅读(106)  评论(0编辑  收藏  举报