Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.

Attaching a link for your reference from echarts. Which provide the option for saveAsImage https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage

As attaching a link of echarts example which has save image icon on the right top corner

https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall

I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.

I really thank the guys who can come up with the solution for the above requirement.

like image 459
Deepak Avatar asked Oct 20 '25 17:10

Deepak


1 Answers

By default, the name of the image is the chart title.

You can set the title by using:

option: {
    title: {
        text: 'myTitle'
    }
}

To provide a custom name, you can use the saveAsImage.name function:

option: {
    toolbox: {
        feature: {
            saveAsImage: {
                name: 'myImageName'
            }
        }
    }
}

Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:

option: {
    toolbox: {
        itemGap: 20,
        bottom: 20,
        ...
    }
}

Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:

option: {
    toolbox: {
        iconStyle: {
            borderWidth: 10,
            borderColor: rgba(0, 0, 0, 0),
            ...
        }
    }
}

Toolbox documentation

like image 140
Jeffrey Roosendaal Avatar answered Oct 22 '25 05:10

Jeffrey Roosendaal



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!