ECharts is a declarative framework for rapid construction of web-based visualization with pure javascript. Hugo Cosmos support ECharts, this article shows how to insert ECharts to your site. You can edit your code using ECharts Online Editor.

Line Chart

Bar Chart

Pie Chart

GEO Map

China Map

External data

World GPS Point, data fetched using XMLHttpRequest

Code example for echarts using external data 
 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/* echarts height="40rem" */

    var ROOT_PATH ='https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
    var CHUNK_COUNT = 230;
    // https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
    function fetchData(idx) {
        if (idx >= CHUNK_COUNT) {
            return;
        }
        var dataURL = ROOT_PATH + '/data/asset/data/gps/gps_' + idx + '.bin';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', dataURL, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            var rawData = new Int32Array(this.response);
            var data = new Float32Array(rawData.length);
            var addedDataCount = rawData.length / 2;
            for (var i = 0; i < rawData.length; i += 2) {
                data[i] = rawData[i + 1] / 1e7;
                data[i + 1] = rawData[i] / 1e7;
            }
            myChart.appendData({
                seriesIndex: 0,
                data: data
            });
            fetchData(idx + 1);
        };
        xhr.send();
    }

    var option = {
      backgroundColor: '#000',
      title: {
        text: '10000000 GPS Points',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'world',
        roam: true,
        label: {
          emphasis: {
            show: false
          }
        },
        silent: true,
        itemStyle: {
          normal: {
            areaColor: '#323c48',
            borderColor: '#111'
          },
          emphasis: {
            areaColor: '#2a333d'
          }
        }
      },
      series: [
        {
          name: '弱',
          type: 'scatterGL',
          progressive: 1e6,
          coordinateSystem: 'geo',
          symbolSize: 1,
          zoomScale: 0.002,
          blendMode: 'lighter',
          large: true,
          itemStyle: {
            color: 'rgb(20, 15, 2)'
          },
          postEffect: {
            enable: true
          },
          silent: true,
          dimensions: ['lng', 'lat'],
          data: new Float32Array()
        }
      ]
    };
    fetchData(0);
/* /echarts */

Details of ECharts

Hugo Short Code: ECharts