echarts图表tooltip中嵌套echarts图

Vcitory

已于 2022-10-19 11:09:54 修改

阅读量567

点赞数

文章标签： echarts javascript

于 2022-10-19 11:08:53 首次发布

本文链接：https://blog.csdn.net/weixin_60723844/article/details/127404092

版权

tooltip: {　
padding: 0,
position: (point, params, dom, rect, size) => {　　　　
var html = '<div class="echarts_box"><div class="echarts_box1"></div><div class="echarts_box2"></div><div class="echarts_box3"></div></div>';　　　　
$(dom).html(html);
var arr = Array.from(document.querySelectorAll(".echarts_box2"));
var arr1 = Array.from(document.querySelectorAll(".echarts_box3"));
var charArr = arr.map(item => echarts.init(item));
var charArr1 = arr1.map(item => echarts.init(item));　
var option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
var option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
charArr.forEach(item => item.setOption(option1));　
charArr1.forEach(item => item.setOption(option2));　
}
},