echarts二维区域图写法

ECharts 二维区域图主要分为线性区域图和非线性区域图两种类型，下面分别介绍它们的写法。

1. 线性区域图

线性区域图是指通过连续的线条将不同的数据点连接起来，形成一个面积。下面是线性区域图的基本写法：

// 准备数据
var data = [
  [10, 30, 50, 80, 90],
  [20, 40, 60, 70, 80]
];

// 配置选项
var option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['数据1', '数据2']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '数据1',
    type: 'line',
    stack: '总量',
    areaStyle: {},
    data: data[0]
  }, {
    name: '数据2',
    type: 'line',
    stack: '总量',
    areaStyle: {},
    data: data[1]
  }]
};

// 创建图表实例
var myChart = echarts.init(document.getElementById('mychart'));

// 渲染图表
myChart.setOption(option);

在上述代码中，我们通过准备数据和配置选项来创建一个 ECharts 实例，并渲染一个线性区域图。其中，数据通过一个二维数组来表示，每一行表示一个数据序列；而选项中，我们指定了数据轴的类型和坐标轴的标签，以及每个数据序列的类型、堆叠方式和区域样式等。

2. 非线性区域图

非线性区域图是指通过多个不同的形状来表示不同的数据，它可以显示出多个数据的分布情况。下面是非线性区域图的基本写法：

// 准备数据
var data = [
  { name: '数据1', value: [5, 20, 36, 10] },
  { name: '数据2', value: [10, 30, 10, 30] }
];

// 配置选项
var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    data: ['数据1', '数据2']
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  series: [{
    name: '数据1',
    type: 'scatter',
    symbolSize: function (data) {
      return Math.sqrt(data[2]) * 5;
    },
    data: data[0]
  }, {
    name: '数据2',
    type: 'scatter',
    symbolSize: function (data) {
      return Math.sqrt(data[2]) * 5;
    },
    data: data[1]
 }]
};

// 创建图表实例
var myChart = echarts.init(document.getElementById('mychart'));

// 渲染图表
myChart.setOption(option);