Deepbricks api试用对比

最近看到很多关于api的调用，于是使用Deepbricks测试了一下这些api,这里是前端开发，所以在开发时遇到了一个问题，用这个问题分别提问这里使用了perplexity和Deepbricks api平台下的claude-3.5-sonnet和gpt-4来进行测试发现

结果

perplexity两个模型claude-3.5-sonnet和gpt-4都没有解决问题

Deepbricks api下的claude-3.5-sonnet和gpt-4解决了问题 gpt4mini没有解决问题

经过上面的测试我觉得perplexity平台已经没有续费的必要了。

问题

这里的问题是鼠标放在echarts上面tooltip没显示出来

<template> <div class="echartsBody"> <div class="echartsBody1" ref="echarts1"></div> <div class="echartsBg"> <div class="echartsBgInner"></div> </div> </div> </template> <script> import * as echarts from "echarts" export default { name: 'echarts1', props: { list: { type: Array, default: () => [] }, shadowColor: { type: String, default: 'rgba(254, 175, 87, 0.5)' }, title: { type: String, default: '' }, total: { type: Number, default: 0 }, }, mounted() { this.drawEcharts(); }, watch: { list: { handler() { this.drawEcharts() }, deep: true } }, methods: { drawEcharts() { let myChart = echarts.init(this.refs.echarts1) window.addEventListener('resize', () => { myChart.resize() }) const data = this.list.filter(type => type.checked).map(type => ({ ...type, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: type.color1 }, { offset: 1, color: type.color2 }]), shadowColor: this.shadowColor } } })); const data2 = data.map(item => ({ ...item, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: item.color1.replace('1)', '0.5)') }, { offset: 1, color: item.color2.replace('1)', '0.5)') }]), } } })); const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示系列名、数据名、数据值、百分比 }, series: [ { type: 'pie', center: ['50%', '50%'], radius: ['55%', '75%'], labelLine: { normal: { length: 20 } }, z: 1, label: { show: true, formatter: (params) => `{a|{params.name}}\n{b|${params.percent}%}`, rich: { a: { fontSize: 14, fontFamily: 'MiSans', fontWeight: 400, color: '#D4F2F1' }, b: { fontSize: 16, fontFamily: 'MiSans', fontWeight: 600, color: '#FFFFFF' } }, }, itemStyle: { normal: { borderColor: '#142b47', borderWidth: 1 } }, data: data }, { z: 0, type: 'pie', center: ['50%', '48.5%'], radius: ['55%', '75%'], labelLine: { normal: { length: 20 } }, label: { show: false, position: 'inside', formatter: '{d}%', color: '#fff', fontSize: 16 }, itemStyle: { normal: { borderColor: '#142b47', borderWidth: 1 } }, data: data2 }, ] } myChart.clear() myChart.resize() myChart.setOption(option) }, } } </script> <style lang="scss" scoped> .echartsBody { position: relative; width: 100%; height: calc(100% - 0px); .echartsBody1 { position: relative; width: 100%; height: calc(100% - 0px); } .echartsBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .echartsBgInner { width: 100%; height: 100%; background: url("./assets/echartsbg.png") center center no-repeat; background-size: contain; scale: 0.9; animation: rotate 3s linear infinite; } } } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } </style>
为什么鼠标放在echarts 上没有显示tooltip？

原因是有一个div层遮挡了echarts导致了tooltip没有显示。

perplexity-claude-3.5-sonnet 没有解决问题

并且发现perplexity平台的claude-3.5-sonnet是假的，明明使用的是claude2显示的却是claude-3.5-sonnet

perplexity平台下claude-3.5-sonnet测试，没有解决问题，下面是平台的回复

根据您提供的代码，我发现了几个可能导致tooltip不显示的问题。以下是一些可能的原因和解决方案：

初始化图表时的引用错误：
在drawEcharts()方法中，您使用了this.refs.echarts1，但应该是this.$refs.echarts1。这可能导致图表无法正确初始化。
数据格式问题：
确保this.list中的数据包含必要的字段，如name和value。tooltip需要这些字段来正确显示信息。
tooltip配置可能需要调整：
尽管您已经配置了tooltip，但可以尝试添加一些额外的选项来确保它能正常工作。
z-index问题：
您的图表包含两个重叠的饼图系列，可能需要调整z-index以确保tooltip能够正确显示。

以下是修改后的drawEcharts()方法，包含了一些可能的修复：

drawEcharts() {
  let myChart = echarts.init(this.$refs.echarts1)  // 修正引用
  
  window.addEventListener('resize', () => {
    myChart.resize()
  })
  
  const data = this.list.filter(type => type.checked).map(type => ({
    ...type,
    value: type.value, // 确保数据中包含value字段
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          offset: 0,
          color: type.color1
        }, {
          offset: 1,
          color: type.color2
        }]),
        shadowColor: this.shadowColor
      }
    }
  }));

  // data2的处理保持不变

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      show: true,
      confine: true,
      z: 100 // 增加z-index
    },
    series: [
      {
        name: 'Series 1', // 添加系列名称
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['55%', '75%'],
        labelLine: {
          normal: {
            length: 20
          }
        },
        z: 2, // 调整z-index
        label: {
          // 标签配置保持不变
        },
        itemStyle: {
          normal: {
            borderColor: '#142b47',
            borderWidth: 1
          }
        },
        data: data
      },
      {
        name: 'Series 2', // 添加系列名称
        z: 1,
        type: 'pie',
        center: ['50%', '48.5%'],
        radius: ['55%', '75%'],
        labelLine: {
          normal: {
            length: 20
          }
        },
        label: {
          // 标签配置保持不变
        },
        itemStyle: {
          normal: {
            borderColor: '#142b47',
            borderWidth: 1
          }
        },
        data: data2
      },
    ]
  }
  
  myChart.clear()
  myChart.resize()
  myChart.setOption(option)

  // 手动触发tooltip显示
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 0
  });
}

此外，请确保：

this.list中的数据格式正确，包含所有必要的字段。
在Vue组件的mounted钩子中正确调用了this.drawEcharts()方法。
检查控制台是否有任何错误信息。

如果在进行这些修改后tooltip仍然不显示，可能需要进一步检查您的完整代码和数据结构，以找出潜在的冲突或问题。

perplexity-gpt4 没有解决问题

在您的代码中，鼠标悬停在 ECharts 图表上时没有显示 tooltip 的问题可能有以下几个原因：

数据格式问题：确保 this.list 中的数据格式正确，并且每个数据项都包含必要的字段（如 name、value 等），因为 tooltip 依赖于这些字段来显示信息。
ECharts 配置问题：检查您的 ECharts 配置，确保 tooltip 已经正确启用。您可以尝试在 tooltip 配置中添加 show: true 以强制显示 tooltip。
样式覆盖问题：确保没有其他 CSS 样式覆盖了 tooltip 的显示。例如，如果有全局样式将 tooltip 的透明度设置为 0 或者将其 display 设置为 none，则会导致 tooltip 无法显示。
事件监听问题：确认是否有其他的事件监听器阻止了 tooltip 的显示。可以尝试在不添加其他事件监听器的情况下测试图表，看看是否正常工作。
ECharts 版本问题：确保使用的是最新版本的 ECharts，有时候旧版本可能存在一些 bug，可以尝试更新到最新版本。

您可以尝试以下步骤进行排查：

const option = {
  tooltip: {
    show: true, // 确保 tooltip 被启用
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  series: [
    {
      type: 'pie',
      // 其他配置...
    }
  ]
};

如果以上方法仍然无法解决问题，请检查控制台是否有任何错误信息，这些信息可能会提供更多线索来解决问题。

Deepbricks - claude-3.5-sonnet

直接明确说明是div遮挡了，并且让修改css

在你的代码中，tooltip 没有正常显示的原因可能有以下几个：

DOM 元素遮挡问题：从你的代码中可以看到，你在 echartsBody 里面嵌套了一个 echartsBg，这个元素可能在某些情况下遮挡了 echarts1 图表的区域，从而导致 tooltip 无法触发。你可以尝试调整 echartsBg 和 echarts1 的层级顺序，确保图表元素位于最上层，确保鼠标能够与 echarts1 交互。

解决方案：在 echartsBg 元素的 CSS 中加入 z-index 设置：
```
.echartsBg {
  z-index: -1; // 确保背景层在图表层下面
}
```
事件侦听问题：虽然你的 tooltip 配置正确，但有可能 window.addEventListener('resize', () => { myChart.resize() }) 的逻辑触发了某些不必要的重绘或图表行为，导致事件无法正确响应。

尝试将 resize 监听器放在组件外部，或者在 mounted 生命周期中延迟初始化图表，确保一切准备就绪后再绑定事件。
数据绑定问题：确保 list 数据中的 checked 属性和颜色设置都正确无误，确保数据经过正确过滤和映射，特别是 itemStyle 的 normal 配置没有影响事件响应的属性。

尝试这些修改后，看看 tooltip 是否能够正常显示。如果问题依旧存在，可以提供更多的上下文信息，我可以继续帮你调试。

Deepbricks - gpt-40-2024-08-06 解决问题

直接明确说明是div遮挡了，并且让修改css

根据你的代码，鼠标放在 echarts 上没有显示 tooltip 可能有以下几种原因：

tooltip 配置问题：
- 你已经配置了 tooltip，但是你需要确保 trigger 和 formatter 的配置正确。当前代码中的 formatter 是 '{a} <br/>{b}: {c} ({d}%)'，检查数据中是否有对应的 a、b、c 和 d 字段可用来显示。如果这些字段有问题，tooltip 可能无法显示。
鼠标事件被其他元素阻挡：
- 你有一个 .echartsBg 元素，它带有动画，且位于 echarts 图表的背景。确保这个背景元素不会阻挡鼠标事件。可以尝试给 .echartsBg 添加 pointer-events: none，以防止它捕获鼠标事件。
```
.echartsBg {
  pointer-events: none;
}
```
图表没有数据或数据格式问题：
- 如果 this.list 数据为空，或者数据没有被正确过滤和处理，tooltip 也不会显示。确保 this.list 中的数据格式正确，且图表绘制的数据中包含 checked 和其他需要的字段。
事件监听器问题：
- 你在 window.addEventListener('resize', () => { myChart.resize(); }) 中添加了 resize 事件。确保这不会影响 tooltip 的显示。你可以尝试在 resize 事件前后清除并重新设置 tooltip。

排查步骤：

检查 this.list 数据，确保格式正确，且数据项中有 checked 为 true 的数据。
确保 .echartsBg 不会阻挡 echarts 的鼠标事件。
确保 tooltip 的 formatter 配置中的字段可以正确获取。