前端echarts tooltip展示多項自定義數(shù)據(jù)代碼示例

更新時間：2024年09月03日 10:22:58 作者：大嘴史努比

Echarts是一個基于JavaScript的開源圖表庫,提供了豐富的圖表類型,如折線圖、柱狀圖、餅圖、散點圖等,支持動態(tài)數(shù)據(jù)交互和自定義配置,這篇文章主要給大家介紹了關(guān)于前端echarts tooltip展示多項自定義數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

效果如圖

鼠標滑動到某一個柱子的時候，出現(xiàn)這一項數(shù)據(jù)的多個自定義數(shù)據(jù)，外加自己的模板樣式渲染。

希望能展示每一列中的多個自定義數(shù)據(jù)

代碼部分

主要是在data中，value就是實際展示的主數(shù)據(jù)，其他字段名為自定義的數(shù)據(jù)。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    },
    formatter: function(params) {
              // params 是一個數(shù)組，包含了每個數(shù)據(jù)項的信息
              var result = `<div style="width: 402px;font-family: PingFang SC, PingFang SC-Regular;backdrop-filter: blur(20px);">
                <div class="top" style="margin-top:14px;margin-left:20px">
                  <div class="tl" style="width: 50px;font-size: 18px;margin-bottom: 4px;margin-right: 200px;">里程：${params[0].data.b}(km)</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度：${params[0].data.a}(km/h)</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度：${params[0].data.value}(km/h)</div>
                </div>
              </div>`;
              return result;
            },
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
      {value:44, a:2, b:3},{value:33, a:2, b:3},{value:22, a:2, b:3},{value:66, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3}
      ],
    },
  ]
};

總結(jié)

到此這篇關(guān)于前端echarts tooltip展示多項自定義數(shù)據(jù)的文章就介紹到這了,更多相關(guān)echarts tooltip多項自定義數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: