Issue encountered when embedding Echarts into Hugo site

[SimZhou]

Hi, I am having a trouble using echarts in hugo.
Basically I want to embed a 3D graph like this: [link] into my site. How should I do this?

Here’s what I’ve tried:

1. Theme Documentation - Extended Shortcodes - LoveIt
2. 让你的Hugo博客支持echarts图表 | 前端大爆炸! - WEB BANG! BANG!! BANG!!!

Both of them uses shortcodes to parse the json data object written in .md(.Inner), which is required by echarts:
1.

2.

However both of them fail to parse an object(function) as a json. which is required by 3D Chart to calculate the corresponding z axis value given x and y.

            z: function (x, y) {
                if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                    return '-';
                }
                return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
            }

How should I solve this?

[pamubay]

I think you can modify the (2) second method by removing the JSON.parse function. You can pass it directly like this:

var option = {{ .Inner | safeJS }};

[SimZhou]

Many thanks!!!

[SimZhou]

I found one solution myself as well:

var option = eval('('+{{ .Inner }}+')');