如何在ECharts工具栏添加自定义按钮及多选下拉框实现系列操作？

一、添加自定义按钮实现新增数据系列 #

1. 配置工具栏自定义按钮 #

在ECharts的option.toolbox.feature中新增自定义按钮，通过自定义名称配置图标、提示文本，并绑定点击事件。

2. 实现点击新增数据逻辑 #

点击按钮时，生成新的系列数据（实际场景可替换为后端请求），通过更新option的series数组，再调用setOption完成图表更新。

代码示例：

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('main'));

// 初始配置
let option = {
    tooltip: { trigger: 'axis' },
    toolbox: {
        feature: {
            // 自定义新增系列按钮
            addSeries: {
                show: true,
                title: '新增数据系列',
                icon: 'path://M10 10v40h40v-40h-40zm5 5h30v30h-30v-30z', // 自定义矩形图标
                onclick: function () {
                    // 生成新系列数据（可替换为后端请求）
                    const newSeries = {
                        name: `新系列${myChart.getOption().series.length + 1}`,
                        type: 'line',
                        stack: 'Total',
                        data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100]
                    };
                    // 更新配置并渲染
                    const currentOption = myChart.getOption();
                    currentOption.series.push(newSeries);
                    myChart.setOption(currentOption);
                }
            },
            // 保留默认工具栏功能
            saveAsImage: {},
            restore: {}
        }
    },
    legend: { data: ['Email', 'Union Ads'] },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [
        { name: 'Email', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210] },
        { name: 'Union Ads', type: 'line', stack: 'Total', data: [220, 182, 191, 234, 290, 330, 310] }
    ]
};

myChart.setOption(option);

二、添加多选下拉框实现动态加载数据 #

1. 页面添加多选下拉控件 #

在图表容器外添加原生多选下拉框（也可替换为第三方UI组件）：

<div style="margin-bottom: 10px;">
    <label>选择数据来源：</label>
    <select id="sourceSelector" multiple style="height: 120px; width: 200px;">
        <option value="Email">Email</option>
        <option value="Union Ads">Union Ads</option>
        <option value="Video Ads">Video Ads</option>
        <option value="Direct">Direct</option>
        <option value="Search Engine">Search Engine</option>
    </select>
    <button id="loadDataBtn">加载数据</button>
</div>
<div id="main" style="width: 600px; height: 400px;"></div>

2. 绑定事件并请求后端数据 #

给按钮绑定点击事件，获取选中的选项值，通过AJAX请求后端接口（后端执行SQL查询），拿到数据后更新图表配置。

代码示例：

// 绑定加载按钮事件
document.getElementById('loadDataBtn').addEventListener('click', function () {
    const selector = document.getElementById('sourceSelector');
    // 获取选中项
    const selectedSources = Array.from(selector.options).filter(opt => opt.selected).map(opt => opt.value);
    
    if (selectedSources.length === 0) {
        alert('请至少选择一个数据来源');
        return;
    }

    // 发送请求到后端（替换为你的接口地址）
    fetch('/api/getTrafficData', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sources: selectedSources })
    })
    .then(res => res.json())
    .then(data => {
        // 更新图表配置
        myChart.setOption({
            legend: { data: data.legend },
            series: data.series.map(item => ({
                name: item.name,
                type: 'line',
                stack: 'Total',
                data: item.data
            }))
        });
    })
    .catch(err => {
        console.error('数据加载失败:', err);
        alert('数据加载失败，请稍后重试');
    });
});

3. 后端SQL处理示例（Node.js + MySQL） #

后端接收选中的数据源，用参数化查询避免SQL注入：

// 后端接口示例
app.post('/api/getTrafficData', async (req, res) => {
    const { sources } = req.body;
    try {
        // 拼接参数化查询条件
        const placeholders = sources.map(() => '?').join(',');
        const sql = `SELECT source_name, day1, day2, day3, day4, day5, day6, day7 FROM traffic WHERE source_name IN (${placeholders})`;
        const [rows] = await db.query(sql, sources);
        
        // 转换为ECharts需要的格式
        const legend = rows.map(row => row.source_name);
        const series = rows.map(row => ({
            name: row.source_name,
            data: [row.day1, row.day2, row.day3, row.day4, row.day5, row.day6, row.day7]
        }));
        
        res.json({ legend, series });
    } catch (err) {
        console.error('查询失败:', err);
        res.status(500).json({ error: '查询出错' });
    }
});

关键注意事项 #

• 自定义工具栏按钮的图标支持path://前缀的SVG路径，也可使用图片链接。
• 更新图表时，setOption会自动合并新旧配置，无需重新初始化实例。
• 后端必须使用参数化查询，杜绝SQL注入风险。
• 多选下拉框的样式可根据需求替换为Element UI、Ant Design等第三方组件优化交互。

内容的提问来源于stack exchange，提问作者Selva