Gráfico de echarts anidado en la información sobre herramientas del gráfico de echarts
En nuestro trabajo, si hay más demandas de echarts, inevitablemente encontraremos la necesidad de gráficos anidados. Se ve muy bien, pero de hecho es un gráfico muy simple. Permítanme mostrarles el escenario de la aplicación primero. La imagen de arriba
Un gráfico de radar está anidado en el gráfico de líneas de arriba.Cuando movemos el mouse al elemento de datos correspondiente al eje X actual, se generarán diferentes gráficos de radar de acuerdo con los datos. Todos sabemos que al generar el grafo echarts, se genera obteniendo la instanciación del nodo dom Dos preguntas: ¿cómo generar el elemento dom en el tooltip? ¿Cómo se procesan los datos? No hay mucho que decir, vayamos al código (las partes clave del código tienen comentarios)
//这里是折线图的组件代码
<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>
Bueno, el código termina aquí, invitamos a todos a comunicarse, calentarse unos a otros, mejorar juntos, ¡vamos! ! ! !