echarts 修改k线图的tooltips名称-优快云博客

本文链接：https://blog.youkuaiyun.com/jo_an_na/article/details/81774551

本文介绍了一种使用ECharts实现股票K线图交互的方法，通过定制化的提示框展示开盘价、收盘价、最高价、最低价及成交量等关键信息，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var option = this.priceChart.getOption()
      console.log(option)
      var kpEn = this.$dirct('开盘')
      var zdEn = this.$dirct('最低')
      var spEn = this.$dirct('收盘')
      var zgEn = this.$dirct('最高')
      var cjlEn = this.$dirct('成交量')
      option.tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000'
        },
        formatter: function (params) {
          console.log(params)
          var obj = {}
          if (params[0].value[0] !== undefined) {// 防止放上去提示undefined
            obj = {
              sName: params[0].seriesName,
              name: params[0].name,
              start: params[0].value[0],
              close: params[0].value[1],
              low: params[0].value[2],
              height: params[0].value[3],
              vol: params[1].value
            }
          } else {
            obj = {
              sName: params[1].seriesName,
              name: params[1].name,
              start: params[1].value[0],
              close: params[1].value[1],
              low: params[1].value[2],
              height: params[1].value[3],
              vol: params[0].value
            }
          }
          console.log(obj)
          var res = obj.sName + ' ' + obj.name
          res += '<br/>  ' + kpEn + ' : ' + obj.start + '  ' + zdEn + '  : ' + obj.height
          res += '<br/>  ' + spEn + ' : ' + obj.close + '  ' + zgEn + ': ' + obj.low
          res += '<br/>  ' + cjlEn + ': ' + obj.vol
          return res
        }
      }
      this.priceChart.setOption(option)