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

本文主要是介绍实现一个不太常见的统计图，可拖拽漫游，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

如下图所示

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

visualMap

• 分段型视觉映射组件（visualMapPiecewise）

分段型视觉映射组件，有三种模式：

• • 连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
  • 连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
  • 离散数据根据类别分段: 类别定义在 visualMap-piecewise.categories 中。

自定义『分段式视觉映射组件（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 组件：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

• 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。

• 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

这篇关于实现一个不太常见的统计图，可拖拽漫游的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！