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
Tags:
持续跟进
求助
物料
yunyin
Posts: 10

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

是要完成tooltip吗？这个不需要监听touch事件。你可以看下formatter是否用的是 字符串函数的方式。 另外下面是一个事例

Code: Select all

const xData = ['关键词', '关键词2', '关键词3', '关键词4', '关键词5', '关键词6', '关键词7'],
const yData = [7, 5, 6, 8, 9, 7, 8],


const options = {
        backgroundColor: '#fff',
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: true,
        },
        grid: {
          left: '5%', // 定义网格的左边距
          right: '6%', // 定义网格的右边距
          top: '20%', // 定义网格的上边距
          bottom: '6%', // 定义网格的下边距
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          backgroundColor: 'rgb(242, 242, 242)',
          borderColor: '#ddd',
          borderWidth: 0,
          borderRadius: 8,
          padding: 0,
          formatter: `function (params) {
              var valueStyle = "display: inline;font-family: Manrope;font-size: 22px;font-weight: 600;line-height: 24px;color: #3D3D3D;";
              var name = "<div style='color: rgba(0, 0, 0, 0.45);font-size: 10px;'>" + params[0].name + "</div>";
              var unitStyle = "display: inline;font-size: 10px;font-weight: normal;line-height: 16px;color: #3D3D3D;margin-left: 2px;";
              var value = "<div>" + "<div style='" + valueStyle + "'>" + params[0].value + "</div>" + "<div style='" + unitStyle + "'>" + injectVars.pcsStr + "</div>" + "</div>";
              return "<div style='padding: 2px 10px;'>" + name + value + "</div>";
            }`,
          renderMode: 'html',
          confine: true, // 限制tooltip在组件内
          // 固定位置：相对于柱子左右居中
          position: `function (point, params, dom, rect, size) {
            // 获取图表实例和柱子的数据索引
            var dataIndex = params[0].dataIndex;
            var barCenterX = myChart.convertToPixel('xAxis', dataIndex);
            var tooltipWidth = size.contentSize[0];
            // 计算tooltip相对于柱子居中的位置：柱子中心x坐标 - tooltip宽度的一半
            return [barCenterX - tooltipWidth / 2, '0%'];
          }`,
          shadowBlur: 0, // 去除阴影
          shadowColor: 'transparent', // 阴影颜色透明
        },
        series: [
          {
            name: '测试样例',
            data: yData,
            type: 'bar', // 这里同时支持 bar line pie 等
            itemStyle: {
              color: '#4DB6AC',
              borderRadius: 6,
            },
          },
        ],
      }
Post Reply