资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

ECharts 复杂折线图示例

创作时间:

作者:

@小白创作中心

ECharts 复杂折线图示例

引用

CSDN

https://m.blog.csdn.net/qq_22182989/article/details/145370011

本文将详细介绍如何使用ECharts实现复杂的自定义折线图，并添加丰富的样式和交互功能。通过本文的学习，你将掌握如何实现一个美观且功能丰富的数据可视化图表。

复杂折线图简介

复杂折线图通常包含多个数据系列、自定义样式、交互功能（如数据区域缩放、提示框等）。它适合展示多维数据的趋势和对比情况，常用于金融、统计、监控等领域。

实现步骤

1. 初始化 ECharts 实例

首先，我们需要初始化一个 ECharts 实例，并绑定到一个 DOM 容器上。

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

2. 配置标题与副标题

通过 title 配置项，我们可以为图表添加标题和副标题。

title: {
    text: '复杂折线图示例', // 主标题
    subtext: '多系列折线图', // 副标题
    left: 'center' // 标题居中
}

3. 配置提示框（Tooltip）

通过 tooltip 配置项，我们可以设置鼠标悬停时的提示框内容。

tooltip: {
    trigger: 'axis', // 触发类型为坐标轴
    axisPointer: {
        type: 'line' // 指示器类型为直线
    },
    formatter: function(params) {
        var result = params[0].name + '<br>'; // 提示框标题
        params.forEach(function(item) {
            result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br>'; // 提示框内容
        });
        return result;
    }
}

4. 配置图例（Legend）

通过 legend 配置项，我们可以设置图例的位置和数据。

legend: {
    data: ['系列1', '系列2', '系列3'], // 图例数据
    left: '10%', // 图例位置
    top: '10%' // 图例位置
}

5. 配置工具箱（Toolbox）

通过 toolbox 配置项，我们可以添加工具箱，支持数据视图、保存图片等功能。

toolbox: {
    show: true, // 显示工具箱
    feature: {
        dataZoom: { // 数据区域缩放
            yAxisIndex: 'none' // 不关联 Y 轴
        },
        restore: { show: true }, // 显示还原按钮
        saveAsImage: { show: true } // 显示保存图片按钮
    }
}

6. 配置 X 轴与 Y 轴

通过 xAxis 和 yAxis 配置项，我们可以设置 X 轴和 Y 轴的样式和数据。

xAxis: {
    type: 'category', // X 轴类型为类目轴
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // X 轴数据
    boundaryGap: false // 不留空白
},
yAxis: {
    type: 'value', // Y 轴类型为数值轴
    splitLine: {
        show: true // 显示分割线
    }
}

7. 配置数据系列（Series）

通过 series 配置项，我们可以添加多个数据系列。每个系列可以设置不同的类型、样式等。

折线图系列

{
    name: '系列1', // 系列名称
    type: 'line', // 图表类型为折线图
    data: [120, 132, 101, 134, 90, 230, 210], // 数据内容
    itemStyle: {
        color: '#5470C6' // 折线颜色
    },
    lineStyle: {
        width: 3 // 折线宽度
    },
    symbol: 'circle', // 数据点形状为圆形
    symbolSize: 10 // 数据点大小
}

区域填充系列

{
    name: '系列2', // 系列名称
    type: 'line', // 图表类型为折线图
    data: [220, 182, 191, 234, 290, 330, 310], // 数据内容
    areaStyle: { // 区域填充样式
        color: 'rgba(145, 204, 117, 0.5)' // 填充颜色
    },
    lineStyle: {
        width: 2 // 折线宽度
    },
    symbol: 'rect', // 数据点形状为矩形
    symbolSize: 12 // 数据点大小
}

自定义样式与交互

1. 自定义折线颜色与样式

通过 itemStyle 和 lineStyle 配置项，我们可以自定义折线的颜色和样式。

itemStyle: {
    color: '#EE6666' // 折线颜色
},
lineStyle: {
    width: 4, // 折线宽度
    type: 'dashed' // 折线类型为虚线
}

2. 自定义数据点样式

通过 symbol 和 symbolSize 配置项，我们可以自定义数据点的形状和大小。

symbol: 'triangle', // 数据点形状为三角形
symbolSize: 14 // 数据点大小

3. 添加动画效果

通过 animation 和 animationDuration 配置项，我们可以为图表添加动画效果。

animation: true, // 开启动画
animationDuration: 1000, // 动画时长 1000ms
animationEasing: 'cubicInOut' // 动画缓动效果

4. 添加数据区域缩放

通过 dataZoom 配置项，我们可以添加数据区域缩放功能。

dataZoom: [
    {
        type: 'inside', // 内置型数据区域缩放
        start: 0, // 初始缩放范围
        end: 100 // 初始缩放范围
    },
    {
        type: 'slider', // 滑动条型数据区域缩放
        start: 0, // 初始缩放范围
        end: 100 // 初始缩放范围
    }
]

完整代码示例（带详细注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 复杂折线图示例</title>
    <!-- 引入 ECharts 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个 div 容器，用于放置 ECharts 图表 -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script>
        // 初始化 ECharts 实例，绑定到 id 为 'main' 的 DOM 元素上
        var myChart = echarts.init(document.getElementById('main'));
        // 配置项
        var option = {
            // 标题配置
            title: {
                text: '复杂折线图示例', // 主标题
                subtext: '多系列折线图', // 副标题
                left: 'center' // 标题居中
            },
            // 提示框配置
            tooltip: {
                trigger: 'axis', // 触发类型为坐标轴
                axisPointer: {
                    type: 'line' // 指示器类型为直线
                },
                formatter: function(params) {
                    var result = params[0].name + '<br>'; // 提示框标题
                    params.forEach(function(item) {
                        result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br>'; // 提示框内容
                    });
                    return result;
                }
            },
            // 图例配置
            legend: {
                data: ['系列1', '系列2', '系列3'], // 图例数据
                left: '10%', // 图例位置
                top: '10%' // 图例位置
            },
            // 工具箱配置
            toolbox: {
                show: true, // 显示工具箱
                feature: {
                    dataZoom: { // 数据区域缩放
                        yAxisIndex: 'none' // 不关联 Y 轴
                    },
                    restore: { show: true }, // 显示还原按钮
                    saveAsImage: { show: true } // 显示保存图片按钮
                }
            },
            // X 轴配置
            xAxis: {
                type: 'category', // X 轴类型为类目轴
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // X 轴数据
                boundaryGap: false // 不留空白
            },
            // Y 轴配置
            yAxis: {
                type: 'value', // Y 轴类型为数值轴
                splitLine: {
                    show: true // 显示分割线
                }
            },
            // 数据系列配置
            series: [
                {
                    name: '系列1', // 系列名称
                    type: 'line', // 图表类型为折线图
                    data: [120, 132, 101, 134, 90, 230, 210], // 数据内容
                    itemStyle: {
                        color: '#5470C6' // 折线颜色
                    },
                    lineStyle: {
                        width: 3 // 折线宽度
                    },
                    symbol: 'circle', // 数据点形状为圆形
                    symbolSize: 10 // 数据点大小
                },
                {
                    name: '系列2', // 系列名称
                    type: 'line', // 图表类型为折线图
                    data: [220, 182, 191, 234, 290, 330, 310], // 数据内容
                    areaStyle: { // 区域填充样式
                        color: 'rgba(145, 204, 117, 0.5)' // 填充颜色
                    },
                    lineStyle: {
                        width: 2 // 折线宽度
                    },
                    symbol: 'rect', // 数据点形状为矩形
                    symbolSize: 12 // 数据点大小
                },
                {
                    name: '系列3', // 系列名称
                    type: 'line', // 图表类型为折线图
                    data: [150, 232, 201, 154, 190, 330, 410], // 数据内容
                    itemStyle: {
                        color: '#EE6666' // 折线颜色
                    },
                    lineStyle: {
                        width: 4, // 折线宽度
                        type: 'dashed' // 折线类型为虚线
                    },
                    symbol: 'triangle', // 数据点形状为三角形
                    symbolSize: 14 // 数据点大小
                }
            ],
            // 数据区域缩放配置
            dataZoom: [
                {
                    type: 'inside', // 内置型数据区域缩放
                    start: 0, // 初始缩放范围
                    end: 100 // 初始缩放范围
                },
                {
                    type: 'slider', // 滑动条型数据区域缩放
                    start: 0, // 初始缩放范围
                    end: 100 // 初始缩放范围
                }
            ],
            // 动画配置
            animation: true, // 开启动画
            animationDuration: 1000, // 动画时长 1000ms
            animationEasing: 'cubicInOut' // 动画缓动效果
        };
        // 将配置项应用到图表中，渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>