vue echarts k线图提示框tooltip 怎么自定义每个字段的名字?yuan代码怎么看?

img


tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000'
        },
        position: function (pos, params, el, elRect, size) {
          const obj = {
            top: 10
          };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        }
        // extraCssText: 'width: 170px'
      },

这里 position 里 默认 字段名是 open close MA5 MA10 ,能不能自己命名,
并且加振幅字段, 振幅:hightest / lowest?
到底要怎么做?
怎么感觉是写死的
代码怎么看?

回答:数据是可以改变的,字段名字也很好改变,就是这个open、close需要花点心思实验一下,动手一下,可以看看官方文档里面的配置项和例子;
参考文章:https://www.cnblogs.com/steamed-twisted-roll/p/14368766.html

实例效果:

img

img

选择路径重写解决官方示例里jquery的跨域问题:

img

测试项目下载:https://gitee.com/anxwefndu/echarts-drawing-example

推荐该项目,可进行绘图学习:https://gitee.com/anxwefndu/stock-prediction-system

https://blog.csdn.net/tenc1239/article/details/131614239?spm=1001.2014.3001.5502

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 以下回答来自chatgpt:
    option = {
      ...
      tooltip: {
        formatter: function (params) {
          var customTooltip = '<b>' + params[0].name + '</b><br>';
          customTooltip += '开盘价: ' + params[0].data[0] + '<br>';
          customTooltip += '收盘价: ' + params[0].data[1] + '<br>';
          customTooltip += 'MA5: ' + params[0].data[2] + '<br>';
          customTooltip += 'MA10: ' + params[0].data[3] + '<br>';
    
          var highest = Math.max.apply(Math, params.map(function(o) { return o.data[1]; }));
          var lowest = Math.min.apply(Math, params.map(function(o) { return o.data[0]; }));
          var amplitude = highest - lowest;
          customTooltip += '振幅: ' + amplitude + '<br>';
    
          return customTooltip;
        },
        ...
      },
      ...
    };
    

    以上是一个vue echarts绘制k线图的示例,其中我们通过formatter函数自定义了tooltip提示框的字段名,并且计算了振幅字段。在tooltip的formatter函数中,我们首先拼接了一个包含了股票名称的标题行,然后追加了自定义的字段名和相应的数值。

    对于振幅字段的计算,我们通过使用Math.max和Math.min方法遍历params数组中的所有数据项,取得最高价和最低价,然后将它们相减得到振幅。

    最后,我们将拼接好的自定义tooltip返回,它将在鼠标悬浮在k线图上时显示出来。

    希望以上的代码能够帮助你实现自定义字段名和添加振幅字段的需求。如果你有任何其他的问题或需要进一步的帮助,都可以随时告诉我。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^