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

需求：点击图例，重新计算 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,
        }
      },复制