天天看點

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,每日一點小積累…

繼續閱讀