echarts图表tooltip中嵌套echarts图
echarts图表tooltip中嵌套echarts图
我们在工作中，如果echarts的需求比较多的话，难免会遇到嵌套图表的需求，看起非常炫酷，实际上却很简单的图表，先给大家看看应用场景，上图
上面折线图中嵌套了一个雷达图，当我们鼠标移动到当前X轴对应的数据项时，根据数据生成不同的雷达图。我们都知道生成echarts图时通过获取dom节点实例化生成的，两个问题tooltip里面的dom元素怎么生成？数据怎么处理？话不多说我们上代码（代码中的关键部分有注释）
//这里是折线图的组件代码
<template>
<div>
<div :ref="id" class="right"></div>
</div>
</template>
<script>
import mixins from "绝对路径"
import totalMangeHttp from "相对路径";
export default {
mixins:[mixins],
data() {
return {
myChart: null,
myChartTwo:null,
totalvalue:[],
text:'',
typelist:[],
type:''
};
},
created() {
this.getdatastr('typelist','AI_ATMOSPHERE_TYPE')
},
mounted() {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
props: {
id: {//传进来的唯一标识
type: String,
},
showData: {//传进来的折线图的数据
type: Array,
default() {
return [];
},
},
xdata:{//折线图X轴的数据
type:Array,
default(){
return []
}
},
radardata:{//传进来的 每一项形成雷达图需要的数据
type:Array,
default(){
return []
}
}
},
watch: {
showData: {
deep: true,
handler(newVal, oldValue) {
this.$nextTick(() => {
this.initQuanProgress(this.id);
});
},
},
},
methods: {
getdatastr(attr, code) {
totalMangeHttp.searchDataStr({ itemCode: code }).then(res => {
this[attr] = res.result;
});
},
initQuanProgress(id) {//这里不多说，老粉丝应该知道的
if (!this.$refs[id]) return;
this.myChart = this.$echarts.init(this.$refs[id]);
this.myChart.clear();
this.setQuanProgress();
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
setQuanProgress() {
let that = this;
let option = {
title: {
subtext: "浓度 (μg/L)",
left: "3%",
y: "8%",
textStyle: {
fontSize: 16,
fontStyle: "normal",
color: "#000",
},
},
tooltip: {//关键地方
trigger: 'axis',
padding: 3,
backgroundColor: "#ffffff",
enterable: true,
formatter:(params, ticket, callback)=> {//通过formatter传进来三个参数，并且处理格式，
//在处理格式的时候添加dom元素，并且加上宽高
//不明白这三个参数分别是啥的可以像我这样打印一下,
//然后通过回调把当前数据项传出去
console.log(params, ticket, callback);
var htmlStr = ``;
// 记得重新渲染的时候要进行防抖处理，避免性能影响
callback(that.setTooltipEchart(params));
return htmlStr;
},
position: function(point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else {
// 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},
dataZoom:[
{
type:'slider',//slider表示有滑动块的，inside表示内置的
show:true,
xAxisIndex:[0],
height:'5',
start:0,
end:this.xdata.length >= 100 ? 10 : this.xdata.length >= 80 ? 20 : this.xdata.length >= 50 ? 40 : 50,
bottom:85,
}
],
legend: {
data: ['no2','o3','pm10','pm25','so2'],
},
grid: {
left: "3%",
right: "4%",
bottom: "8%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
show: true,
interval:2,
textStyle: {
color: "#a9a9a9", //更改坐标轴文字颜色
fontSize: 10 //更改坐标轴文字大小
},
rotate:-50,
},
data:this.xdata,
},
yAxis: {
type: "value",
},
series: this.showData,
};
this.myChart.setOption(option);
},
setTooltipEchart(params){//这里就是处理雷达图的方法
console.log(params);
let index = params[0].dataIndex;//拿到tooltip的参数，判断鼠标放在第几个数据项上
this.text = params[0].axisValue;
console.log(this.radardata[index]);
let data = this.radardata[index];//通过index拿到对应的雷达图数据
this.type = this.formatStr(data['pollution_type'][0],'typelist');
//下面就是处理雷达图的数据格式了
this.totalvalue = [
{
name:'特征值',
value:data['CV']
},
{
name:'标准值上限',
value:data['Max']
},
{
name:'标准值下限',
value:data['Min']
},
{
name:'标准值',
value:data['benchmark']
}
]
this.$nextTick(()=>{//然后setoption方法生成，记住这里一定要用$nextTick不然你拿不到dom节点
if (!document.getElementById("tooltipChart")) return;
this.myChartTwo = this.$echarts.init(document.getElementById("tooltipChart"));
this.myChartTwo.clear();
this.setQuanProgresstwo();
})
},
setQuanProgresstwo(){
let option = {
title: {
text:this.text + '时' + '\xa0\xa0\xa0\xa0' + this.type,
textStyle:{
fontSize:12
}
},
legend: {
orient: 'horizontal',
type:'scroll',
y: "bottom",
data: ['特征值', '标准值上限', '标准值下限', '标准值'],
},
radar: {
indicator: [
{
name: 'so2',
},
{
name: 'pm10',
},
{
name: 'pm25',
},
{
name: 'co',
},
{
name: 'no2',
}
],
nameGap : 3,
radius: 50,
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: this.totalvalue,
}
]
};
this.myChartTwo.setOption(option);
}
},
};
</script>
<style lang="less" scoped>
.right {
width: 100%;
height: 280px;
}
</style>
好了，代码到这里就结束，欢迎大家沟通交流，相互温暖，一起提升，加油！！！！