在slider中會遇到的問題

1.slider兩邊要求展示的為文字，但過濾的時候過濾條件為下標，實現(xiàn)思路如下：

• 過濾的時候判斷條件是數(shù)值類型即下標，但為了在滑塊兩端展示文字，需要將’start’,'end’那邊改成對應的起始終止文字，但又會出現(xiàn)新的問題，就是在onChange里面打印的startText和endText也為相應的文字而不是下標，考慮著在變化的時候需要將變化的下標賦值給ds里面的from和to,不然chart圖表不再展示，就需要進行遍歷判斷一下，找到文字下對應的下標，然后賦值給from和to。

2. 視野中默認展示5條數(shù)據(jù)，鼠標移入柱圖的時候，label變顏色，但當移動slider后，再移入柱圖時會報錯

• 原因：移動完slider之后，重新獲取的視野中的五個label又是新的0-4的label，labelAll = document.querySelectorAll('.g2-label-customize')，但移入的當前的柱圖的下標是所有數(shù)據(jù)中的某一個，這樣就會有沖突（比如：移入的當前的柱圖，下標是3，但在當前l(fā)abel下可能是0）
• 解決：截取當前視野下的數(shù)據(jù)，放在一個數(shù)組里面，其順序就會與所有的label的順序一致

import React from 'react';
import G2 from '@antv/g2';
import Slider from '@antv/g2-plugin-slider';
import DataSet from '@antv/data-set';

class Silder extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentDidMount() {
    this.fun()
  }

  fun() {
    let mIndex;//當前移入的下標
    let startIndex = 0;//起始下標
    let endIndex = 4;//終止下標
    const data = [
      { index: 0, type: 'a', type1: 'b', type2: 'c', country: '巴西', value: 18203, value1: 1820 },
      { index: 1, type: 'a', type1: 'b', type2: 'c', country: '印尼', value: 23489, value1: 2349 },
      { index: 2, type: 'a', type1: 'b', type2: 'c', country: '美國', value: 29034, value1: 2934 },
      { index: 3, type: 'a', type1: 'b', type2: 'c', country: '印度', value: 104970, value1: 14970 },
      { index: 4, type: 'a', type1: 'b', type2: 'c', country: '中國', value: 131744, value1: 31744 },
      { index: 5, type: 'a', type1: 'b', type2: 'c', country: '加拿大', value: 11203, value1: 1320 },
      { index: 6, type: 'a', type1: 'b', type2: 'c', country: '塞爾維亞', value: 143489, value1: 12349 },
      { index: 7, type: 'a', type1: 'b', type2: 'c', country: '倫敦', value: 20034, value1: 21934 },
      { index: 8, type: 'a', type1: 'b', type2: 'c', country: '泰國', value: 14970, value1: 1470 },
      { index: 9, type: 'a', type1: 'b', type2: 'c', country: '巴基斯坦', value: 0, value1: 21744 },
    ];

    let nums = []//value的所有值
    data.forEach(item => {
      nums.push(item.value)
    })

    let maxNum = 0;//最大值
    maxNum = Math.max(...nums) + 1

    data.forEach(item => {
      item.value2 = maxNum
    })

    const ds = new DataSet({
      state: {
        from: data[0].index,
        to: data[4].index
      }
    })

    const dv = ds.createView();
    dv.source(data)
      .transform({
        type: 'filter',//過濾條件，與滑塊聯(lián)動進行chart展示
        callback: obj => {
          // console.log(obj);
          return obj.index >= ds.state.from && obj.index <= ds.state.to
        }
      });

    const chart = new G2.Chart({
      container: 'container',
      forceFit: true,
      height: 320,
      padding: [40, 60, 70, 90]
    })

    const view1 = chart.view()
    view1.source(dv)
    view1.scale('value', {
      min: Math.min(...nums),
      max: Math.max(...nums) + 1
    })
    view1.interval().position('country*value').color('type').tooltip('country*value*value1*value2', function (country, value, value1, value2) {
      // console.log(country, value, value1, 'ccc');
      return {
        value: !value ? '--' : value,
        value1: !value1 ? '--' : value1,
        value2: !value2 ? '--' : value2
      }
    }).label('country*value', function (country, value) {
      return {
        useHtml: true,
        htmlTemplate: function htmlTemplate(text, item) {
          return (
            `<span class="g2-label g2-label-customize" style="color:#b3f;font-size:20px" >` +
            value +
            "</span > "
          );
        },
        // offset: 10,
      }
    })

    const view2 = chart.view()
    view2.source(dv)
    //triangle 三角形
    view2.point().position('country*value1').color('type1', 'orange').shape('triangle').size(7).style({
      lineWidth: 0
    })
    view2.axis('value1', {
      position: 'right',
      grid: null
    })
    view2.tooltip(false)

    const view3 = chart.view()
    view3.source(dv)
    view3.scale('value2', {
      min: Math.min(...nums),
      max: Math.max(...nums) + 1
    })
    view3.interval().position('country*value2').color('transparent')
    view3.axis('value2', false)
    view3.tooltip(false)

    chart.on('interval:mouseenter', ev => {
      mIndex = dv.origin.slice(startIndex, endIndex + 1).findIndex(item => item.country === ev.data._origin.country
      )
      let labelAll = document.querySelectorAll('.g2-label-customize');
      labelAll[mIndex].style.color = 'red';
    })

    chart.on('interval:mouseleave', ev => {
      let labelAll = document.querySelectorAll('.g2-label-customize');
      labelAll[mIndex].style.color = '#b3f';
    })

    //使用輔助文本來設置坐標上方的單位
    chart.guide().text({
      top: true,
      position: ['start', 'end'],
      content: '(萬m2)',
      style: {
        fill: '#000',
        fontSize: '12'
      },
      offsetX: -40,
      offsetY: -20
    })

    chart.guide().text({
      top: true,
      position: ['end', 'end'],
      content: '(月)',
      style: {
        fill: '#000',
        fontSize: '12'
      },
      offsetX: 15,
      offsetY: -20
    })

    //設置tooltip
    chart.tooltip({
      // title: 'year',
      containerTpl: '<div class="g2-tooltip">' + '<p class="g2-tooltip-title" ></p>' + '<ul class="g2-tooltip-list"></ul>' + '</div>', // tooltip的外層模板
      itemTpl:
        `<li class="g2-tooltip-list-item" data-index={index} >
  <span style="width:5px;height:5px;background:#2762d3;float:left;margin-right:5px;margin-top:8px; border-radius: 50%;"></span><p>a(萬m2)<span class="g2-tooltip-value">{value}</span></p>
  <span style="width:5px;height:5px;background:#ffa900;float:left;margin-right:5px;margin-top:8px; border-radius: 50%;"></span><p>b(月)<span class="g2-tooltip-value" style="display: inline-block; float: right; margin-left: 30px;"
  >{value1}</span></p>
  </li> `,
      offset: 50,
      'g2-tooltip': {
        position: 'absolute',
        width: '160px',
        backgroundColor: '#fff',
        color: '#000',
        padding: '5px 15px',
        fontSize: '12px',
        'transition': 'top 200ms,left 200ms'
      }
    });

    chart.render()

    //滑塊
    const slider = new Slider({
      container: 'silder',
      padding: [60],
      height: 15,
      start: data[0].country,//聲明滑動條起始滑塊的位置對應的數(shù)據(jù)值
      end: data[4].country,//聲明滑動條結束滑塊的位置對應的數(shù)據(jù)值
      data,//原始數(shù)據(jù)data不是轉換后的數(shù)據(jù)dv
      xAxis: 'country',//x軸對應的字段
      yAxis: 'value1',//y軸對應的字段
      fillerStyle: {//選中區(qū)域的樣式配置，默認配置如下：
        fill: 'red',
        fillOpacity: 0.4
      },
      backgroundChart: {//slider 整體背景樣式。
        type: 'line',
        color: 'rgba(0, 0, 0, 0.3)',
        fill: 'yellow'
      },
      textStyle: {//slider 輔助文本字體樣式配置。
        fill: 'orange'
      },
      backgroundStyle: {
        fill: 'blue'
      },
      onChange: ({ startText, endText }) => {//當滑動條滑塊發(fā)生變化時，觸發(fā)該回調函數(shù)，主要用于更新 ds 的狀態(tài)量。該回調函數(shù)會提供一個參數(shù)，該參數(shù)是一個對象，包含如下屬性：const { startValue, endValue, startText, endText } = obj;
        console.log(startText, endText);

        //過濾的時候判斷條件是數(shù)值類型即下標，但為了在滑塊兩端展示文字，需要將'start','end'那邊改成對應的起始終止文字，但又會出現(xiàn)新的問題，就是在onChange里面打印的startText和endText也為相應的文字而不是下標，考慮著在變化的時候需要將變化的下標賦值給ds里面的from和to,不然chart圖表不再展示，就需要進行遍歷判斷一下，找到文字下對應的下標，然后賦值給from和to


        //dv.rows的數(shù)據(jù)是實時變化的，所以不能拿dv.rows數(shù)據(jù)做判斷條件，拿原始的數(shù)據(jù)dv.origin或者data做判斷

        let startRows = dv.origin.filter(item => item.country === startText)
        let endRows = dv.origin.filter(item => item.country === endText)

        startIndex = startRows[0].index
        endIndex = endRows[0].index

        // !!! 更新狀態(tài)量
        ds.setState('from', startIndex);
        ds.setState('to', endIndex);
      }
    });

    slider.render();
  }

  render() {
    return (
      <div>
        <div id='container'></div>
        <div id='silder'></div>
      </div >
    )
  }
}
export default Silder