echarts 折线图鼠标悬浮框内容样式修改

hey_ner

已于 2023-11-15 10:07:01 修改

阅读量3.2k

点赞数 4

分类专栏： echarts 文章标签： echarts

于 2023-07-05 10:57:53 首次发布

本文链接：https://blog.csdn.net/Griner_/article/details/131550720

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章展示了如何使用Echarts创建堆叠折线图（stackedLine）并自定义tooltip，以显示额外的数据信息。通过修改tooltip的formatter函数，可以实现将数据值与特定颜色的圆点结合，以增强数据的可视化效果。

摘要由CSDN通过智能技术生成

1.原echarts 折线图

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

运行结果：

2.修改后

//tooltip 新增展示数据
var array=[{Mon:120, Tue:132, Wed:101,Thu: 134, Fri:90,Sat: 230, Sun:210}]
option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    },
    formatter: function (params) {
           var relVal = params[0].name;
            relVal+='<br/>' +"<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f17f0a;\"></span>" + '次数' +": "+ array[0][relVal.replace(/"/g, '')]
             for (var i = 0, l = params.length; i < l; i++) {
                 relVal += '<br/>' + params[i].marker + params[i].seriesName +": "+ params[i].value
         }
        
      return relVal
     }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

运行结果：tooltip 悬浮框新增'次数'