Static data configuration method

Static Data Configuration Method

The static data configuration in ECharts is the most basic data binding approach, suitable for scenarios with fixed data volumes and no frequent updates. Simple JavaScript objects or arrays can be used to define chart data without relying on dynamic data interfaces.

Data Format Basics

Static data supports multiple formats, with arrays being the most commonly used. For basic charts like bar charts, data is typically structured as two-dimensional arrays:

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'
  }]
};

For multi-series data, an array of objects can be used:

series: [
  {
    name: 'Email',
    type: 'line',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Union Ads',
    type: 'line',
    data: [220, 182, 191, 234, 290, 330, 310]
  }
]

Handling Special Data Structures

For displaying multi-dimensional data, nested arrays can be used. For example, heatmaps require two-dimensional arrays:

data: [
  [0, 0, 5], [0, 1, 7], [0, 2, 3],
  [1, 0, 1], [1, 1, 2], [1, 2, 4],
  [2, 0, 2], [2, 1, 3], [2, 2, 6]
]

Tree diagrams require a specific hierarchical structure:

data: {
  name: 'root',
  children: [
    {
      name: 'category1',
      value: 10,
      children: [
        { name: 'item1', value: 5 },
        { name: 'item2', value: 5 }
      ]
    }
  ]
}

Data and Visual Mapping

The visualMap component can map data to visual elements. For example, changing colors based on numerical values:

visualMap: {
  min: 0,
  max: 100,
  calculable: true,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  }
}

For discrete data, segmented visual mapping can be used:

visualMap: {
  type: 'piecewise',
  pieces: [
    { min: 0, max: 50, label: '0-50', color: '#93CE07' },
    { min: 50, max: 100, label: '50-100', color: '#FBDB0F' }
  ]
}

Static Data Optimization Techniques

For large datasets, sampling optimization can be applied:

series: {
  type: 'line',
  sampling: 'lttb',
  data: [...largeDataSet]
}

For reusable data, pre-formatting is recommended:

const rawData = [/* raw data */];
const formattedData = rawData.map(item => ({
  name: item[0],
  value: item.slice(1)
}));

Handling Data Errors

Static data should also account for outliers:

data: [120, 200, null, 80, '-', 110, 130]

ECharts automatically handles these special values:

• null/undefined: Displayed as gaps in data.
• '-': Indicates no data.
• NaN: Filtered out.

Multi-Coordinate System Data Configuration

In complex charts, different series can be bound to different coordinate systems:

grid: [
  { left: '10%', top: '10%', width: '30%', height: '30%' },
  { left: '60%', top: '10%', width: '30%', height: '30%' }
],
series: [
  {
    type: 'bar',
    gridIndex: 0,
    data: [10, 20, 30]
  },
  {
    type: 'line',
    gridIndex: 1,
    data: [50, 30, 40]
  }
]

Static Data and Animations

Even with static data, rich animation effects can be configured:

series: {
  type: 'pie',
  animationType: 'scale',
  animationEasing: 'elasticOut',
  animationDelay: function (idx) {
    return idx * 200;
  },
  data: [
    {value: 335, name: 'A'},
    {value: 310, name: 'B'}
  ]
}

Combining Themes with Static Data

Predefined themes can unify the visual style of static data:

// Register a theme
echarts.registerTheme('my_theme', {
  color: ['#c23531','#2f4554','#61a0a8']
});

// Apply the theme
const chart = echarts.init(dom, 'my_theme');
chart.setOption({
  series: [{
    data: [10, 20, 30]
  }]
});

Data Annotation and Markers

Static data can include various markers:

series: {
  type: 'line',
  markPoint: {
    data: [
      { type: 'max', name: 'Max' },
      { type: 'min', name: 'Min' }
    ]
  },
  data: [10, 20, 5, 30, 15]
}

Example of area marking:

series: {
  type: 'line',
  markArea: {
    data: [[
      { name: 'Morning', xAxis: '9:00' },
      { xAxis: '11:00' }
    ]]
  }
}

Exporting Static Data

Configured static data can be retrieved using the getOption method:

const currentOption = chart.getOption();
console.log(JSON.stringify(currentOption));

It can also be exported as an image:

const imgData = chart.getDataURL({
  type: 'png',
  pixelRatio: 2
});