鍍金池/ 問答/HTML/ echarts如何在一個canvas下 默認(rèn)顯示當(dāng)前 圖的備注(頁面已加載就顯示

echarts如何在一個canvas下 默認(rèn)顯示當(dāng)前 圖的備注(頁面已加載就顯示,不hover click等)

圖片描述

如何配置可以使得圖片標(biāo)注文字顯示### 問題描述

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

因?yàn)楣镜臉I(yè)務(wù)背景 需要給每一個series下的數(shù)據(jù)顯示一個別名

試了下用兩個定時器來
setTimeout(() => {

            this.echart.dispatchAction({
                type: 'showTip',
                seriesIndex:0,
                dataIndex:0,
                position: ['25%', '75%']
            });
        },1000);
        setTimeout(() => {
            this.echart.dispatchAction({
                type: 'showTip',
                seriesIndex:1,
                dataIndex:0,
                position: ['70%', '75%']
            });
        },2000)
        
        但是好像第二個定時器的tooltip覆蓋了第一個定時器的效果

相關(guān)代碼

// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)
<script>

import echart from 'echarts'



export default {
    data() {
        return {
            echart:null,
            option:{
                tooltip: {
                    triggerOn: 'none',
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
                },
                series: [
                    {
                        name:'訪問來源1',
                        type:'pie',
                        tooltip: {
                            triggerOn: 'none',
                            formatter: "訪問來源1",
                            alwaysShowContent:true
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        radius: ['10%', '20%'],
                        center : ['25%', '50%'],
                        avoidLabelOverlap: false,
                        data:[
                            {value:3351, name:'直接訪問'},
                            {value:3101, name:'郵件營銷'},
                            {value:2341, name:'聯(lián)盟廣告'},
                            {value:1351, name:'視頻廣告'},
                            {value:15481, name:'搜索引擎'}
                        ]
                    },
                    {
                        name:'訪問來源2',
                        type:'pie',
                        tooltip: {
                            triggerOn: 'none',
                            formatter: "訪問來源2",
                            alwaysShowContent:true
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        radius: ['10%', '20%'],
                        center : ['75%', '50%'],
                        avoidLabelOverlap: false,
                        data:[
                            {value:335, name:'直接訪問'},
                            {value:310, name:'郵件營銷'},
                            {value:234, name:'聯(lián)盟廣告'},
                            {value:135, name:'視頻廣告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            }

        };
    },
    methods: {

    },
    mounted(){
        this.echart = echart.init(document.getElementById('canvas1'))


        // 模擬數(shù)據(jù)
        setTimeout( () => {
            this.echart.setOption(this.option)
        },1000)

        setTimeout(() => {
            this.echart.dispatchAction({
                type: 'showTip',
                seriesIndex:0,
                dataIndex:0,
                position: ['25%', '75%']
            });
        },1000);
        setTimeout(() => {
            this.echart.dispatchAction({
                type: 'showTip',
                seriesIndex:1,
                dataIndex:0,
                position: ['70%', '75%']
            });
        },2000)
    },
    components: {

    }
}

</script>

你期待的結(jié)果是什么?實(shí)際看到的錯誤信息又是什么?

實(shí)際上看到的先顯示訪問來源1 再顯示訪問來源2
圖片描述
圖片描述

回答
編輯回答
喵小咪

在文檔上看到這樣的描述
可以通過batch 參數(shù)批量分發(fā)多個 action

myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{
        // 第一個 dataZoom 組件
        start: 20,
        end: 30
    }, {
        // 第二個 dataZoom 組件
        dataZoomIndex: 1,
        start: 10,
        end: 20
    }]
})

未親測,你可以試下

2018年1月21日 20:07