Top

CommonCharts点击图表区域内空白区域，不出现tooltip

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
chuang
Posts: 1

  • Tuya MiniApp IDE 版本信息：0.10.2~
    • App 应用版本信息： 智能生活7.6.2~
    • @ray-js/ray 1.7.68, @ray-js/panel-sdk 1.14.1
    • 移动设备信息：iPhone Air 26.3~
    • 相关代码：
      <CommonCharts
      usingPlugin
      unit={unit}
      loadingText="加载中..."
      getEchartsProxy={echartsInstance => {
      chartRef.current = echartsInstance;
      }}
      on={{
      dataZoom: handleDataZoom,
      click: handleClick,
      showTip: handleShowTip,
      hideTip: handleHideTip,
      mousemove: handleMouseMove,
      }}
      option={{
      backgroundColor: '#fff',
      dataZoom: [
      {
      type: 'inside',
      start: 80,
      end: 100,
      zoomLock: false,
      moveOnMouseMove: true,
      preventDefaultMouseMove: false,
      },
      ],
      xAxis: {
      type: 'category',
      data: chartData.date,
      axisLabel: {
      color: '#666',
      fontSize: 10,
      formatter: xAxisFormatter
      },
      },
      yAxis: {
      type: 'value',
      min: 'dataMin',
      axisLabel: { color: '#666', fontSize: 10 },
      },
      tooltip: {
      triggerOn: 'none',
      formatter: tooltipFormatter,
      renderMode: 'html',
      confine: true,
      position: (point: any) => {
      // 水平位置跟随光标，垂直位置固定在顶部
      return [point[0], '0%'];
      },
      backgroundColor: '#ffffff',
      borderColor: 'transparent',
      borderWidth: 0,
      padding: [4, 10],
      textStyle: {
      color: lineColor,
      fontSize: 14,
      },
      shadowBlur: 12,
      shadowColor: 'rgba(0, 0, 0, 0.1)',
      borderRadius: 12,
      },
      axisPointer: {
      type: 'cross',
      lineStyle: {
      color: '#E5E7EB',
      width: 1,
      type: 'dashed',
      },
      },
      series: [
      {
      name: seriesName,
      data: processedData,
      type: 'line',
      step: 'start', // 将普通折线变为阶梯线，拐点位于每个区间的起点
      // smooth: true, // 平滑效果，让线条呈现为折线段流畅曲线型
      triggerLineEvent: true,
      markPoint: {
      data: [
      { type: 'max', name: '最高' },
      { type: 'min', name: '最低' },
      ],
      symbol: 'circle',
      symbolSize: markPointSize,
      itemStyle: {
      color: markPointColor,
      borderColor: markPointBorderColor,
      borderWidth: markPointBorderWidth,
      },
      label: {
      // show: false, // 隐藏标记点数值
      formatter: '{c}',
      color: '#666666',
      position: 'top',
      distance: 3,
      },
      },
      lineStyle: { color: lineColor, width: lineWidth },
      areaStyle: {
      color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
      { offset: 0, color: areaColorStart },
      { offset: 1, color: 'rgba(255, 255, 255, 0)' },
      ],
      },
      },
      itemStyle: { color: lineColor },
      },
      ],
      grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
      }}
      />
    • 日志信息：错误日志或 IDE 运行日志等~
    • 问题描述（复现步骤）：在ray面板小程序中使用CommonCharts，点击图表空白区域，不触发on属性的click和mousemove，已在图表中设置了triggerLineEvent: true
    • 预期结果：点击图表区域就出现tooltip，包括空白区域，曲线，数据点；在图表区域内滑动，tooltip跟随
    • 实际结果：点击图表空白区域不出现tooltip，在空白区域滑动也不出现tooltip
Post Reply