echarts example

by Exceeder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/extension/dataTool.min.js"></script>
<div id="main" style="width: 100vw; height:100vh; background:#efefef"></div>

CSS

html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; }

JavaScript

var myChart = echarts.init(document.getElementById('main'));
const symbolSize = 5;
const N = 500;
const data = [...Array(N).keys()].map(k => [0,0]);
let G = 1;
setInterval(() => {
  data.forEach((el,i) => {
      let t = i * 2 * Math.PI / N;
      let r = 70 * Math.cos(t) * Math.sin(G * t / 10);      
      [data[i][0], data[i][1]] = [r * Math.cos(t), r * Math.sin(t)];
  });    
  G += 0.05;
  //redraw
  myChart.setOption({ series: [{ id: 'a', data: data }] });
}, 150);

option = {
    title: {
        text: 'Radial Chart Example sin(a)*cos(t*a) with t [1..inf] '
    },
    tooltip: {
        triggerOn: 'none'
    },
    grid: {},
    xAxis: {
        min: -80,
        max: 80,
        type: 'value',
        axisLine: {onZero: false}
    },
    yAxis: {
        min: -60,
        max: 60,
        type: 'value',
        axisLine: {onZero: false}
    },
    dataZoom: [
        {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'empty'
        }
    ],
    series: [
        {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
        }
    ]
};


setTimeout(function () {
  // Add shadow circles (which is not visible) to enable drag.
  myChart.setOption({
    graphic: echarts.util.map(data, function (item, dataIndex) {
      return {
        type: 'circle',
        position: myChart.convertToPixel('grid', item),
        shape: {
          cx: 0,
          cy: 0,
          r: symbolSize / 2
        },
        invisible: true,                   

        onmousemove: echarts.util.curry(showTooltip, dataIndex),
        onmouseout:...