Nested echarts graph in echarts chart tooltip
In our work, if there are more demands on echarts, we will inevitably encounter the need for nested charts. It looks very cool, but in fact it is a very simple chart. Let me show you the application scenario first. The above picture
A radar chart is nested in the line chart above. When we move the mouse to the data item corresponding to the current X axis, different radar charts will be generated according to the data. We all know that when generating the echarts graph, it is generated by obtaining the dom node instantiation. Two questions: how to generate the dom element in the tooltip? How is the data processed? Not much to say, let's go to the code (the key parts of the code have comments)
//这里是折线图的组件代码
<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 = `<div id="tooltipChart" ref='tooltipEchart' style='width:160px;height:180px;'></div>`;
// 记得重新渲染的时候要进行防抖处理，避免性能影响
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>
Well, the code ends here, welcome everyone to communicate, warm each other, improve together, come on! ! ! !