配置項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
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQ3chVEa0V3bT9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVP9cnT4FkaNxmUYF2c4dlWyYkMkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zM2kTOxYjMzITMzATM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
✦ 與 ECharts2 中 dataRange 的關系 ✦
visualMap 是由 ECharts2 中的 dataRange 元件 改名以及擴充 而來。ECharts3裡 option 中的 dataRange 配置項仍然被相容,會自動轉換成 visualMap 配置項。在option中 推薦 寫 visualMap 而非 dataRange。
splitNumber 連續型平均分段案例
pieces 連續型自定義分段案例
categories 離散資料根據類别分段
tooltip 提示框元件
提示框元件的通用介紹:
可以設定在全局,即 tooltip
可以設定在坐标系中,即 grid.tooltip、polar.tooltip、singleAxis.tooltip
可以設定在系列中,即 series.tooltip
可以設定在系列的每個資料項中,即 series.data.tooltip
全局 tooltip 點選檢視執行個體
坐标系中 grid.tooltip 暫無執行個體,抽空可以找找 需要看特定配置點選這兒
系列中 series.tooltip 暫無執行個體,抽空可以找找 需要看特定配置點選這兒
系列的每個資料中 series.data.tooltip 暫無執行個體,抽空可以找找 需要看特定配置點選這兒
PS: tooltip 一般用于全局中比較多,特定的系列有各自特定的效果及配置,使用比較窄。
使用 tooltip 中用得最多的 formatter 需要多看看。
formatter和rich隻有官網上的配置項裡面有對應的屬性才能配合一起使用;tooltip中的formatter中不能配合rich使用。
每日一更Echarts,每日一點小積累…