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