echarts

Line Chart

This code initializes a basic line chart with ECharts. It sets up the x-axis with categories representing days of the week and the y-axis with numerical values. The series data represents the values for each day.

const echarts = require('echarts');
const chart = echarts.init(document.getElementById('main'));
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [150, 230, 224, 218, 135, 147, 260],
    type: 'line'
  }]
};
chart.setOption(option);

Bar Chart

This code initializes a basic bar chart with ECharts. Similar to the line chart, it sets up the x-axis with categories and the y-axis with numerical values. The series data represents the bar heights for each category.

const echarts = require('echarts');
const chart = echarts.init(document.getElementById('main'));
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
};
chart.setOption(option);

Pie Chart

This code initializes a basic pie chart with ECharts. The series data represents different categories and their corresponding values, which are displayed as slices of the pie.

const echarts = require('echarts');
const chart = echarts.init(document.getElementById('main'));
const option = {
  series: [{
    type: 'pie',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
  }]
};
chart.setOption(option);