快捷導(dǎo)航

echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端

更新時(shí)間：2024年09月13日 11:10:09 作者：無(wú)言非影

在電腦端和移動(dòng)端的數(shù)據(jù)展示中,針對(duì)移動(dòng)端的特殊性,進(jìn)行了一系列優(yōu)化措施,這篇文章主要介紹了echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端的相關(guān)資料,需要的朋友可以參考下

電腦端

移動(dòng)端

代碼片段

    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        backgroundColor: '#F2F5F9',
        fillerColor: '#BFCCE3',
        height: 13, // 設(shè)置slider的高度為15
        start: 0,
        end: 100,
        right: 60,
        left: 60,
        bottom: 15,
        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用類似 axisPointer 的圖標(biāo)
        handleSize: '200%', // 放大按鈕
        borderColor: 'none',
        handleStyle: {
          color: '#BFCCE3',
          shadowBlur: 6,
          shadowColor: 'rgba(123, 154, 204, 0.5)',
          shadowOffsetX: 0, // 陰影偏移x軸多少
          shadowOffsetY: 0 // 陰影偏移y軸多少
        },
        // 顯示的label的格式化器
        // 20050101 變?yōu)?2005\n0101
        labelFormatter: function (index, value) {
          const year = value.slice(0, 4);
          const date = value.slice(4);
          return year + '\n' + date;
        },
        textStyle: {
          fontStyle: 'italic' // 設(shè)置字體傾斜
        },
        showDataShadow: false // 隱藏?cái)?shù)據(jù)陰影
      }
    ]

思路：

showDataShadow: false // 隱藏?cái)?shù)據(jù)陰影
是把數(shù)據(jù)預(yù)覽去掉
移動(dòng)端不太方便，所以把按鈕進(jìn)行了修改方便用戶拖拽。

        handleIcon:
          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用類似 axisPointer 的圖標(biāo)
        handleSize: '200%', // 放大按鈕
        borderColor: 'none',
        handleStyle: {
          color: '#BFCCE3',
          shadowBlur: 6,
          shadowColor: 'rgba(123, 154, 204, 0.5)',
          shadowOffsetX: 0, // 陰影偏移x軸多少
          shadowOffsetY: 0 // 陰影偏移y軸多少
        },

因?yàn)?日期格式是 YYYYMMDD, 手機(jī)上顯示太長(zhǎng)了，這里做了換行處理。

        // 顯示的label的格式化器
        // 20050101 變?yōu)?2005\n0101
        labelFormatter: function (index, value) {
          const year = value.slice(0, 4);
          const date = value.slice(4);
          return year + '\n' + date;
        },

這里有個(gè)坑：labelFormatter

labelFormatter官網(wǎng)說(shuō)，value在type 為 'category’的時(shí)候，是索引值。

但我實(shí)際看到的效果不是。

比如我有7000個(gè)數(shù)據(jù)點(diǎn)，每次拖拽的時(shí)候，索引index只有200多個(gè)，導(dǎo)致我獲取不到數(shù)據(jù)。

因?yàn)橹幌胪献У臅r(shí)候，格式化顯示的label，第二個(gè)參數(shù)就是當(dāng)時(shí)顯示的label，但是文檔里沒(méi)有標(biāo)出來(lái)。
https://echarts.apache.org/zh/option.html#dataZoom-slider.labelFormatter

總結(jié)

到此這篇關(guān)于echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端的文章就介紹到這了,更多相關(guān)echarts拖拽滑塊dataZoom-slider適配移動(dòng)端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！