资讯详情

微信小程序使用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)。单位为毫秒(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];           } lse {
            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);
      }
    },

  },
});

标签: 拉杆应变计用变送器csa

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台