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 = `<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>

好了，代码到这里就结束，欢迎大家沟通交流，相互温暖，一起提升，加油！！！！