静态数据配置方法

静态数据配置方法

ECharts中静态数据配置是最基础的数据绑定方式，适用于数据量较小且不需要动态更新的场景。通过直接定义数据数组或对象，可以快速完成图表渲染。

数据格式基础

ECharts支持多种静态数据格式，常见的有：

1. 线性数组：适用于单维度数据展示

data: [12, 19, 3, 5, 2, 3]

2. 对象数组：适合多维度数据展示

data: [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' }
]

3. 二维数组：常用于热力图等特殊图表

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

柱状图数据配置

柱状图的静态数据配置通常包含x轴数据和系列数据：

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: 'bar',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Union Ads',
    type: 'bar',
    data: [220, 182, 191, 234, 290, 330, 310]
  }
]

饼图数据配置

饼图使用name-value结构的数据格式：

option = {
  series: [{
    type: 'pie',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' }
    ]
  }]
};

带半径控制的环形饼图配置：

series: [{
  type: 'pie',
  radius: ['40%', '70%'],
  data: [
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: 'Direct' }
  ]
}]

折线图数据配置

基础折线图数据配置：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

多折线平滑曲线配置：

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

散点图数据配置

散点图需要二维数据格式：

option = {
  xAxis: {},
  yAxis: {},
  series: [{
    symbolSize: 20,
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58]
    ],
    type: 'scatter'
  }]
};

气泡图配置（带第三维度）：

series: [{
  type: 'scatter',
  symbolSize: function (data) {
    return Math.sqrt(data[2]) * 5;
  },
  data: [
    [10.0, 8.04, 14.07],
    [8.0, 6.95, 17.02],
    [13.0, 7.58, 21.05]
  ]
}]

雷达图数据配置

雷达图需要多维数据指标：

option = {
  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Admin', max: 16000 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4200, 3000],
        name: 'Budget'
      },
      {
        value: [5000, 14000],
        name: 'Actual'
      }
    ]
  }]
};

树图数据配置

树形结构数据需要层级关系：

option = {
  series: [{
    type: 'tree',
    data: [{
      name: 'Node1',
      children: [{
        name: 'Node1-1',
        children: [{ name: 'Node1-1-1' }]
      }]
    }]
  }]
};

自定义系列配置

对于复杂图表，可以使用custom系列：

option = {
  dataset: {
    source: [
      ['product', '2015', '2016'],
      ['Matcha Latte', 43.3, 85.8],
      ['Milk Tea', 83.1, 73.4]
    ]
  },
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      // 自定义渲染逻辑
    }
  }]
};

数据分组与聚合

静态数据也可以通过seriesLayoutBy进行行列转换：

option = {
  dataset: {
    source: [
      ['product', '2012', '2013'],
      ['Matcha Latte', 41.1, 30.4],
      ['Milk Tea', 86.5, 92.1]
    ]
  },
  series: [{
    type: 'bar',
    seriesLayoutBy: 'row' // 按行分组
  }]
};

多维度数据编码

通过encode属性映射数据维度：

option = {
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea']
    ]
  },
  series: {
    type: 'scatter',
    encode: {
      x: 'amount',
      y: 'score',
      tooltip: [0, 1, 2]
    }
  }
};

静态数据与视觉映射

通过visualMap组件实现数据到视觉元素的映射：

option = {
  visualMap: {
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  series: [{
    type: 'scatter',
    data: [
      [10, 20, 30],
      [50, 60, 70],
      [80, 90, 100]
    ]
  }]
};

静态数据与动画配置

通过animation相关属性控制静态数据的展示动画：

option = {
  animationDuration: 2000,
  animationEasing: 'elasticOut',
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130],
    animationDelay: function(idx) {
      return idx * 100;
    }
  }]
};