echarts 折线图 分段

ECharts 是一个强大的 JavaScript 可视化库，用于创建交互式的图表和数据可视化。在 ECharts 中，折线图（Line Chart）是一种常用的表示时间序列数据或连续数值变化的图表类型。分段折线图则是对常规折线图的一种扩展，允许数据在特定区间内有不同的颜色、样式或者数据点。

在 ECharts 中，实现分段折线图的主要步骤如下：

1. 创建 ECharts 实例：首先，在 HTML 页面中引入 ECharts.js 文件，并创建一个 ECharts 组件。

2. 配置数据：定义一个包含多个段的数据对象，每个段都有自己的系列（series），包括名称、数据和可能的线型、颜色等配置。

var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Segment 1',
            type: 'line',
            data: [1, 2, 3, 4, 5, 6],
            lineStyle: { // 分段设置
                color: 'red', // 段1的颜色
                type: 'dashed', // 段1的线型
            }
        },
        {
            name: 'Segment 2',
            type: 'line',
            data: [2, 4, 6, 8, 10, 12],
            lineStyle: { // 段2的颜色和线型
                color: 'blue',
                type: 'solid'
            }
        }
    ]
};

3. 设置分段：在 `lineStyle` 属性中，使用 `color` 和 `type` 属性为每个数据段设置不同的样式。

4. 渲染图表：将配置项 `option` 传递给 ECharts 的渲染方法，如 `echarts.init()`，然后调用 `setOption` 方法更新图表。