Is there any solution we can integrate Apache Echarts in gollum wiki?

[klion26]

Hi, is there any solution that we can integrate Apache Echarts in gollum wiki, thanks. Did some search but didn't find the solution.

[dometto]

Hi there! There is at present no readymade solution for doing this. However, you could try using a custom JS file (using the --js command line switch) and including Echarts with something like:

var jQueryScript = document.createElement('script');  
jQueryScript.setAttribute('src','https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js');
document.head.appendChild(jQueryScript);

Echarts looks like a great project that we could try to support officially, so please let me know if you manage to get it running in a basic way with the above, and how you think a supported Echarts feature in gollum should look! (For example, what syntax should be used by the user to define a chart?)

[klion26]

@dometto thanks for the reply, will try the given solution.

For the official support, maybe writing the code like the js code here in the gollum editor is fine to me.

[klion26]

@dometto I've tried to add a custom.js file as below, and start by the command[1], but the content didn't show any echarts chart, the rendered HTML source of the wiki page has been attached below[2], I manually wrote a single HTML page with the code[3], showing the rendered echarts chart. Could you please give some hints on how to make it work, thanks.

Tried adding the HTML code in the wiki content from the web editor, but it didn't work either.

var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js');

<div id="main" style="width: 600px;height:400px;"></div>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
       data: ['销量']
    },
    xAxis: {
       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
         name: '销量',
         type: 'bar',
         data: [5, 20, 36, 10, 10, 20]
      }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

document.head.appendChild(jQueryScript);

[1] docker run --rm -p 4567:4567 -v /path/to/wiki:/wiki gollumwiki/gollum:master --mathjax --h1-title --js
[2] todo_html.txt
[3]
test_echarts_html.txt