echarts的tooltip里面内嵌echarts图

最新推荐文章于 2024-02-06 11:13:20 发布

原创最新推荐文章于 2024-02-06 11:13:20 发布 · 429 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在ECharts的tooltip提示框中内嵌一个小的ECharts图表，实现更丰富的交互效果。通过Vue.js框架进行动态数据绑定，使得内嵌图表能够根据鼠标悬停的数据实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="ChartView">
        <div ref="charts" class="charts"></div>
    </div>
</template>
<script>

export default {
  name: 'ChartView',
  components:{
  },
   data(){
        return {
            
        }
    },
    methods:{
        initEcharts(){
            let that=this;
            let option = {
                tooltip : {
                        trigger: 'item',
                        enterable: true,
                        backgroundColor:'rgba(0,0,0,0)',
                        className:'tooltipItemBox',
                        //设置自定义tooltip,并设置回调函数
                        formatter:function(params, ticket, callback){
                            const div=`<div ref="tooltipItem" class="tooltipItem" id="tooltipItem" style='width:480px;height:280px;'>${params.data.name}</div>`
                            callback(that.setEcharts(params));
                            return div
                        } ,
                    },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                    }
                ]
            };
            let myChart = this.$echarts.init(this.$refs.charts);
            myChart.clear();
            myChart.setOption(option)
        },
        setEcharts(){
            this.$nextTick(()=>{//然后setoption方法生成，记住这里一定要用$nextTick不然你拿不到dom节点
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    backgroundColor:'#fff',
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                        }
                    ]
                };
                let myChart1 = this.$echarts.init(document.getElementById("tooltipItem"));
                myChart1.clear();
                myChart1.setOption(option)
            })
        }
    },
    created(){
        
    },
    mounted() {
        this.initEcharts()
    }
  
}
</script>
<style lang="scss" scoped>
.ChartView{
    width:100%;
    height: 100%;
    .charts{
        width: 800px;
        height: 800px;
        margin: 200px;
    }
}
</style>