Scatter Plot

Code

const chart = echarts.init(document.getElementById('chart'));
const data = [];
for (let i = 0; i < 50; i++) {
  data.push([Math.random() * 100, Math.random() * 100, Math.random() * 30]);
}

chart.setOption({
  tooltip: {
    trigger: 'item',
    formatter: function(p) {
      return 'x: ' + p.value[0].toFixed(1) +
             '<br/>y: ' + p.value[1].toFixed(1) +
             '<br/>size: ' + p.value[2].toFixed(1);
    }
  },
  xAxis: {
    type: 'value', name: 'X',
    splitLine: { lineStyle: { type: 'dashed' } }
  },
  yAxis: { type: 'value', name: 'Y' },
  series: [{
    name: 'Scatter',
    type: 'scatter',
    symbolSize: function(data) { return data[2]; },
    data: data,
    itemStyle: { color: '#91cc75', opacity: 0.7 }
  }]
});

Explanation

Scatter series accept [x, y, ...] arrays as data points; symbolSize can be a function reading the third element to encode an extra dimension as point size. value-type axes on both x and y enable free positioning rather than category binning. Use splitLine.lineStyle.type:'dashed' for a lighter grid.

More ECharts Snippets