To embed Echarts into ZLOG, you just need to write your Echarts HTML codes and wrap them with the @@@ flags, where the wrapped contents mean raw contents . And if you are going to input this flag as common text, just insert a close-up & before the @@@.

Below we show a simple demo embedding Echarts:

And here is the the source code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@@@
<div id="echarts-container" style="position: relative; width: 100%; padding-bottom: 50%; float: center; height: 0;">
<div id="echarts-box" style="position: absolute; width: 100%; height: 100%; left: 0;"></div></div>

<script>
$(document).ready(function(){
    const myChart = echarts.init(document.getElementById('echarts-box'))

    const option = {
        title: {text: 'ζŸεœ°εŒΊθ’Έε‘ι‡ε’Œι™ζ°΄ι‡'},
        tooltip: {trigger: 'axis'},
        legend: {data: ['蒸发量', '降水量']},
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, title: 'Data'},
                magicType: {show: true, title: {line: 'Line', bar: 'Bar'}, type: ['line', 'bar']},
                dataZoom: {show: true, title: {zoom: 'Zoom', back: 'Back'}},
                restore: {show: true, title: 'Restore'},
                saveAsImage: {show: true, title: 'Save'}
            }
        },
        calculable: true,
        xAxis: [{type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']}],
        yAxis: [{type: 'value'}],
        series: [{
                name: '蒸发量', type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint: {data: [{type: 'max', name: 'ζœ€ε€§ε€Ό'},
                                {type: 'min', name: 'ζœ€ε°ε€Ό'}]},
                markLine: {data: [{type: 'average', name: '平均值'}]}
            },{
                name: '降水量', type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint: {data: [{name: 'εΉ΄ζœ€ι«˜', value: 182.2, xAxis: 7, yAxis: 183},
                                   {name: 'εΉ΄ζœ€δ½Ž', value: 2.3, xAxis: 11, yAxis: 3}]},
                markLine: {data: [{type: 'average', name: '平均值'}]}
            }
        ]
    }

    myChart.setOption(option)
    window.addEventListener("resize", function(){myChart.resize()})
})
</script>
@@@

Let us explain it a bit, the specific operations are as follows:

  1. Include Echarts JS sources;
  2. Define an Echarts box (i.e., <div>) for drawing charts, and its father container;
  3. Define your Echarts options (including data and configuration), refer to ECharts Examples;
  4. Set Echarts options and add an event listener for adaptively resizing the charts.

Finish here.

β–²