zoukankan      html  css  js  c++  java
  • ECharts提示框浮层内容格式化

    以多折线图为例:

    1. 初始化echarts

     this.chart = echarts.init(this.$el, 'default')
    

    2. echarts配置项-提示框组件-提示框浮层内容格式器

          this.chart.setOption({
            tooltip: {
              trigger: 'axis',
              formatter: (params) => { // params为悬浮框上的全部数据
                const newParams = []
                params.forEach((p) => {
                  // p.marker为对应数据线的颜色的圆点
                  // p.seriesName为对应数据的数据名称
                  // p.value为对应数据的值
                  const cont = '<div style="margin-bottom: 10px;">' + p.axisValueLabel + '<br/>' + p.marker + ' ' + p.seriesName + ': ' + p.value + '</div>'
                  if (p.seriesName == '折线图1') {
                    newParams[0] = cont
                  } else if (p.seriesName == '折线图2') {
                    newParams[1] = cont
                  } else if (p.seriesName == '折线图3') {
                    newParams[2] = cont
                  }
                })
                // 这里需要将数组转化成字符串显示,如果不转化,每个数据前面都会出现一个逗号
                return newParams.join('')
              }
            }
       })
    

      

    声明:此资源由本博客收集整理,只用于记录心得和交流学习,请勿用作它途。如有侵权,请联系, 删除处理。
  • 相关阅读:
    第四次博客
    第三次作业
    第二次作业
    入学的第一次作业
    第四次作业
    第三次作业
    第二次随笔作业
    第一次随笔
    第四次作业
    第三次作业
  • 原文地址:https://www.cnblogs.com/jzyu/p/13530255.html
Copyright © 2011-2022 走看看