首页 前端知识 echarts 动态展示title以及动态展示tooltip

echarts 动态展示title以及动态展示tooltip

2024-03-04 10:03:09 前端知识 前端哥 236 790 我要收藏

需求:点击图例,重新计算 title 总数,toolTip的formatter 回调拼接

监听图例选择change事件,回调参数返回了当前选择的数据,具体返回内容请查官网,或自己打印一下就知道了。

 myChart.on('legendselectchanged', function (params) {
      var select_key = Object.keys(params.selected);
      var select_value = Object.values(params.selected);
      var list = select_key.map((v, ind) => {
        return {
          name: v,
          selected: select_value[ind]
        }
      })
      let t = 0
      let count = 0
      let countS = '0'
      if (variable) {
        // variable 为图表数据
        variable.forEach(v => {
          list.forEach((x, ind) => {
            if (x.name == v.name && x.selected) {
              t += Number(v.value)
              count += Number(v.typeCount)
              countS = count+'家'
            }
          })
        })
      }
      myChart.setOption({
//重新计算 title展示,由于我这title 要展示多个字段,所以我这里对title 进行了拼接
        title: [
          {
            text: '{name|' + countS + '}\n{val|(' + formatNumber(t) + '}{c|人)}',
            top: 'center',
            // textAlign:'center',
            left: countS == 0 ? '22%':countS.length == 2 ? '18%' : countS.length == 3 ? '15.5%':countS.length == 4 ? '12.5%': '10%',
            textStyle: {
              rich: {
                name: {
                  fontSize: 37,
                  fontWeight: 'normal',
                  fontFamily: 'PangMenZhengDao',
                  color: '#fff',
                  padding: [10, 0, 0, 20],
                },
                val: {
                  fontSize: 16,
                  fontWeight: 'normal',
                  color: '#fff',
                  padding:t==0?[0,0,0,20]:t.length == 2 ?[5, 2, 0, 17]:[5, 2, 0, 0]
                },
                c: {
                  fontSize: 16,
                  fontWeight: 'normal',
                  color: '#fff',
                  padding: [5,0 , 0,0]
                },
              },
            },
          },
        ],
      })
    })

把上述 length监听事件 放在 myChart.setOption(option)后面,就完成了

 toolTip 在formatter 回调中自定义tooltip内容

一般来说,不需要我们去自定义tooltip内容,如果数据比较复杂,且包含了两周且以上类型的图表在一起,可能就需要我们去自定义拼接tooltip,

一般直接使用  a,b,c,就可以满足需要

以下是自定义tooltip 

tooltip: { //提示框组件
        trigger: 'axis',
        // <br />{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}%
        formatter: function (params) {
          let str = `${params[0].name}<br />`
          params.map(item=>{
            if(item.componentSubType === 'bar' || item.componentSubType === 'line'){
              str += item.componentSubType === 'line'?`${item.seriesName}:${item.value}%<br />`:`${item.seriesName}:${item.value}<br />`
            }
          })
          console.log(str)
          return str
        },
        axisPointer: {
          type: 'shadow',
          label: {
            backgroundColor: '#ccc'
          }
        },
        textStyle: {
          color: 'rgb(0,0,0)',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 10,
        }
      },

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3221.html
标签
评论
发布的文章

Jquery提供的load方法

2024-03-26 08:03:18

echarts:去掉markLine

2024-03-26 08:03:08

jQuery总结

2024-03-11 10:03:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!