微信小程序使用echarts热力图左右滑动怎么做？

首先需要在这个配置选项上加入这个代码就行
链接：https://echarts.apache.org/zh/option.html#dataZoom-inside

    dataZoom: [{
        type: 'inside', //1平移 缩放
        throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
        minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
        start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
        end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
      }],

这是写好的组件

import * as echarts from '../../ec-canvas/echarts';

function setPieOption(chart, pieData) {
  const data = pieData.names.map((_, index) => ({
    value: pieData.counts[index],
    name: pieData.names[index],
  }));
  const option = {
    title: { left: 'center', text: `${pieData.radioName}` },
    tooltip: { trigger: 'item' },
    series: [{ type: 'pie', radius: '50%', data,center:['50%','60%'] }],
  };
  chart.setOption(option);
}

function setLineOption(chart, lineData) {
  console.log('lineData==>', lineData);
  const series = lineData.submitterName.map((item, index) => {
    return { name: item, type: 'line', data: lineData.data[index] };
  });
  const option = {
    title: { left: 'center', text: `${lineData.counterName}：${lineData.count}` },
    xAxis: { type: 'category', data: lineData.time },
    yAxis: { type: 'value' },
    series,
    tooltip: {
      trigger: 'axis',
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x = 0; // x坐标位置
        let y = 0; // y坐标位置
        // 当前鼠标位置
        let pointX = point[0];
        let pointY = point[1];
        // 外层div大小
        // let viewWidth = size.viewSize[0];
        // let viewHeight = size.viewSize[1];
        // 提示框大小
        let boxWidth = size.contentSize[0];
        let boxHeight = size.contentSize[1];
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else {
          // 左边放的下
          x = pointX - boxWidth;
        }
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else {
          // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      },
    },
  };
  chart.setOption(option);
}
function setHeatmapOption(chart, heatmapData) {
  console.log('heatmapData==>', heatmapData);
  const data = [];
  let min = 999999999;
  let max = -11111111;
  heatmapData.data?.forEach((yCates, y) => {
    yCates.forEach((value, x) => {
      data.push([x, y, value || '-']);
      if (value > max) max = value;
      if (value < min) min = value;
    });
  });

  const option = {
    dataZoom: [{
        type: 'inside', //1平移 缩放
        throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
        minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
        start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
        end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
      }],
    grid: { left: '17%', bottom: '10%', top: '20%' },
    title: { left: 'center', text: `${heatmapData.counterName}：${heatmapData.count}` },
    tooltip: {
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x = 0; // x坐标位置
        let y = 0; // y坐标位置
        // 当前鼠标位置
        let pointX = point[0];
        let pointY = point[1];
        // 外层div大小
        // let viewWidth = size.viewSize[0];
        // let viewHeight = size.viewSize[1];
        // 提示框大小
        let boxWidth = size.contentSize[0];
        let boxHeight = size.contentSize[1];
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else {
          // 左边放的下
          x = pointX - boxWidth;
        }
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else {
          // 上边放得下
          y = pointY - boxHeight;
        }
        return [x, y];
      },
      formatter(params, ticket, callback) {
        const { dataString, time, submitterName } = heatmapData;
        const { data } = params;
        const label1 = `${time[data[0]]} - ${submitterName[data[1]]}：${data[2]}`;
        const tip = dataString[data[1]][data[0]];
        const size = 28;
        let tipList = tip.split(';').sort((a, b) => a.length - b.length);
        let tipListRes = [];
        let tipTemp = tipList[0];
        for (let i = 1; i < tipList.length; i++) {
          let temp = tipTemp + ';' + tipList[i];
          if (temp.length > size) {
            tipListRes.push(tipTemp);
            tipTemp = tipList[i];
          } else {
            tipTemp = tipTemp + ';' + tipList[i];
          }
        }
        tipListRes.push(tipTemp);
        const lineFeed = `
`;
        // 为了让文本换行只能这样写
        return `${label1}
${tipListRes.join(lineFeed)}`;
      },
    },
    xAxis: { type: 'category', data: heatmapData.time, splitArea: { show: true } },
    yAxis: { type: 'category', data: heatmapData.submitterName, splitArea: { show: true } },
    visualMap: { min, max, show: false },
    series: [
      {
        name: heatmapData.counterName,
        type: 'heatmap',
        data,
        label: { normal: { show: true } },
        itemStyle: { emphasis: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
      },
    ],
  };
  chart.setOption(option);
}

Component({
  properties: {
    // 表单配置 json数组
    chartData: {
      type: Object,
      value: {},
      observer: 'chartDataObserver',
    },
    // 提交次数
    censusSubmit:{
        type: Object,
        value: {},
        observer:'censusSubmitObserver'
    }
  },
  data: {
    ecPie: { lazyLoad: true },
    ecHeatmap: { lazyLoad: true },
    ecLine: { lazyLoad: true },
    pieHeight: '400rpx',
  },
  ready() {},
  methods: {
    initChart() {

      const {censusSubmit, bizStatisticsCounterDTOList, bizStatisticsRadioDTOList } = this.data.chartData;
      censusSubmit.forEach((item, index) => {
        if (item.showHot) {
          const id = '#mychart-dom-heatmap-censusSubmit' + index;
          this.selectComponent(id).init((canvas, width, height, dpr) => {
            const heatmapChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr,
            });
            setHeatmapOption(heatmapChart, item);
            return heatmapChart;
          });
        } else {
          const lineId = '#mychart-dom-line-censusSubmit' + index;
          this.selectComponent(lineId).init((canvas, width, height, dpr) => {
            const lineChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr,
            });
            setLineOption(lineChart, item);
            return lineChart;
          });
        }
      });

      // 创建饼图
      bizStatisticsRadioDTOList.forEach((item, index) => {
        const id = '#mychart-dom-pie' + index;
        console.log('==>', id);
        this.selectComponent(id).init((canvas, width, height, dpr) => {
          const pieChart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          setPieOption(pieChart, item);
          return pieChart;
        });
      });

      bizStatisticsCounterDTOList.forEach((item, index) => {
        if (item.showHot) {
          const id = '#mychart-dom-heatmap' + index;
          this.selectComponent(id).init((canvas, width, height, dpr) => {
            const heatmapChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr,
            });
            setHeatmapOption(heatmapChart, item);
            return heatmapChart;
          });
        } else {
          const lineId = '#mychart-dom-line' + index;
          this.selectComponent(lineId).init((canvas, width, height, dpr) => {
            const lineChart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr,
            });
            setLineOption(lineChart, item);
            return lineChart;
          });
        }
      });
    
    },
    changeShowHotOrLine(e) {
      const { index, flag } = e.currentTarget.dataset;
      const { chartData } = this.data;
      chartData.bizStatisticsCounterDTOList[index].showHot = flag;
      this.setData({ chartData });
      setTimeout(() => {
        this.initChart();
      });
    },
    changeShowHotOrLineCensusSubmit(e){
        const { index, flag } = e.currentTarget.dataset;
        const { chartData } = this.data;
        chartData.censusSubmit[index].showHot = flag;
        this.setData({ chartData });
        setTimeout(() => {
          this.initChart();
        });
     },
    chartDataObserver(chartData) {
      let { bizStatisticsRadioDTOList, bizStatisticsCounterDTOList } = chartData;

      if (bizStatisticsCounterDTOList && bizStatisticsRadioDTOList) {
        // 处理数据
        chartData.bizStatisticsCounterDTOList.forEach((item) => {
          // 热力图Y轴高度适配
          let height = item.data?.length * 66.6 || 66.6;
          height += 350; // 标题高度
          item.heatmapHeight = height + 'rpx';
          // 显示热力图还是折线图
          item.showHot = true;
        });
       const censusSubmit =  []
       censusSubmit.push(chartData.bizStatisticsCounterDTOList[0])
       chartData.bizStatisticsCounterDTOList.splice(0,1)
        chartData.censusSubmit = censusSubmit
        this.setData({ chartData });
        console.log("chartData",chartData);
        // 多个图表 延迟加载一下 保证dom存在
        setTimeout(() => {
          this.initChart();
        }, 100);
      }
    },

  },
});