echart实现堆积折线图

ECharts是一个强大的JavaScript图表库，可以轻松创建各种复杂的图表，包括堆积折线图。堆积折线图是一种数据可视化形式，其中每个系列的数据会被分层叠加在一个时间轴上，形成一条折线，线条的颜色和宽度表示各层次的数据。

在ECharts中，实现堆积折线图的基本步骤如下：

1. **初始化图表**：
首先，你需要在HTML中引入ECharts库，并创建一个`echarts实例`。

<canvas id="main" style="width: 600px;height:400px;"></canvas>

2. **配置选项**：
使用JavaScript设置图表的配置项，包括堆叠模式、数据、标签等。例如：

var option = {
    title: {
        text: '堆积折线图'
    },
    tooltip: {},
    legend: {
        data:['series1', 'series2']
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'series1',
            type: 'line',
            stack: '总量', // 设置堆叠总和
            data: [5, 20, 36, 10, 10, 20, 35]
        },
        {
            name: 'series2',
            type: 'line',
            stack: '总量',
            data: [22, 18, 29, 24, 27, 36, 32]
        }
    ]
};

3. **渲染图表**：
最后，使用`echarts.init()`方法初始化图表并渲染到指定的DOM元素上：

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);