Need help with Apache ECharts

support
,
1

I need some basic help with echarts please.
Not with echarts itself but with displaying basic echarts in hugo.

I saw it could be caused by not using safeJS.
Can you give me a hint how to set up a basic chart?

The code provided by echarts (changed to local delivery) is:

<script src="/js/echarts.min.js"></script>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

Using this doesn’t work too:

<script>{{ "/js/echarts.min.js" . | safeJS }}</script>

2

It would be helpful to know how you insert a chart into a page:

  • Shortcode?
  • Fenced code block?
  • A partial?

And if the chart data is in a data file?

  • Is the file local or remote?
  • If local, is it a page resource, a global resource, or something else?
1 Like
3

I just put this code into the post where I want the chart to be displayed.

Just very basic.

It has worked with chart.js so I was curious why not with echarts till I found some hints about safeJS with hugo (which of course could be wrong)

4

I would use a fenced code block in your markdown files, conditionally adding the JavaScript library if the page has one or more echarts.

git clone --single-branch -b hugo-forum-topic-45500 https://github.com/jmooring/hugo-testing hugo-forum-topic-45500
cd hugo-forum-topic-45500
hugo server

Files of interest:

  • layouts/_default/_markup/render-codeblock-echart.html
  • layouts/_default/baseof.html (look within the head element for the conditional JS library inclusion)
1 Like
5

I have problems starting your site build

hugo server 
Start building sites … 
hugo v0.111.3+extended linux/amd64 BuildDate=2023-03-16T08:41:31Z VendorInfo=debian:0.111.3-1
ERROR 2023/07/28 13:59:40 render of "page" failed: "/home/micro/testing/hugo-forum-topic-45500/layouts/_default/baseof.html:2:15": execute of template failed: template: tests/single.html:2:15: executing "tests/single.html" at <site>: can't evaluate field LanguageCode in type *langs.Language
ERROR 2023/07/28 13:59:40 render of "page" failed: "/home/micro/testing/hugo-forum-topic-45500/layouts/_default/baseof.html:2:15": execute of template failed: template: tests/single.html:2:15: executing "tests/single.html" at <site>: can't evaluate field LanguageCode in type *langs.Language
ERROR 2023/07/28 13:59:40 render of "home" failed: "/home/micro/testing/hugo-forum-topic-45500/layouts/_default/baseof.html:2:15": execute of template failed: template: _default/home.html:2:15: executing "_default/home.html" at <site>: can't evaluate field LanguageCode in type *langs.Language
ERROR 2023/07/28 13:59:40 render of "section" failed: "/home/micro/testing/hugo-forum-topic-45500/layouts/_default/baseof.html:2:15": execute of template failed: template: _default/list.html:2:15: executing "_default/list.html" at <site>: can't evaluate field LanguageCode in type *langs.Language
Error: Error building site: failed to render pages: render of "page" failed: "/home/micro/testing/hugo-forum-topic-45500/layouts/_default/baseof.html:2:15": execute of template failed: template: tests/single.html:2:15: executing "tests/single.html" at <site>: can't evaluate field LanguageCode in type *langs.Language
Built in 6 ms
6

You are running an older version of hugo. Please upgrade to the latest version.

1 Like
8

It was the echarts code that wasn’t right.
I can take your working examples as a start point for my case
Thank you very much for your support!

9

I figured out why the chart hadn’t been displayed.
There must be a blank line after the div (or one before the script).

Works (your example)

<div id=echart-001 style="width: 600px;height: 400px;"></div>

<script type="text/javascript">

Doesn’t work (example by eCharts)

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

Perhaps this is dependent of Markdown.