静态数据配置方法

静态数据配置方法

ECharts的静态数据配置是最基础的数据绑定方式，适用于数据量固定且不需要频繁更新的场景。通过简单的JavaScript对象或数组即可完成图表数据的定义，无需依赖动态数据接口。

数据格式基础

静态数据支持多种格式，最常用的是数组形式。对于柱状图等基础图表，数据通常采用二维数组结构：

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

对于多系列数据，可以采用对象数组形式：

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

特殊数据结构处理

当需要显示多维数据时，可以使用嵌套数组。例如热力图的数据要求是二维数组：

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]
]

树形图需要特定的层次结构：

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

数据与视觉映射

通过visualMap组件可以实现数据到视觉元素的映射。例如根据数值大小改变颜色：

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

对于离散型数据，可以使用分段式视觉映射：

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

静态数据优化技巧

大数据量场景下可以采用采样优化：

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

对于重复使用的数据，可以提前格式化：

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

错误数据处理

静态数据也需要考虑异常值处理：

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

ECharts会自动处理这些特殊值：

• null/undefined：显示为数据缺口
• '-'：表示无数据
• NaN：会被过滤

多坐标系数据配置

在复杂图表中，不同系列可以绑定到不同坐标系：

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

静态数据与动画

即使使用静态数据，也可以配置丰富的动画效果：

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

主题与静态数据结合

通过预定义主题可以统一静态数据的视觉样式：

// 注册主题
echarts.registerTheme('my_theme', {
  color: ['#c23531','#2f4554','#61a0a8']
});

// 使用主题
const chart = echarts.init(dom, 'my_theme');
chart.setOption({
  series: [{
    data: [10, 20, 30]
  }]
});

数据标注与标记

静态数据可以添加各种标记点：

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

区域标记示例：

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

静态数据导出

配置好的静态数据可以通过getOption方法获取：

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

也可以导出为图片：

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