在 echarts的tooltip中实现一个select选择器并在接口中获取到选中的数据

最新推荐文章于 2024-07-20 23:54:17 发布

m0_49471668

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量144

点赞数 2

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_49471668/article/details/138286069

版权

option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [10, 20, 30, 40, 50],
        type: 'bar'
    }],
    tooltip: {
        trigger: 'item', // 修改为 'item'
        triggerOn:'click',
        formatter: function (params) {
            var html = '<div>';
            for (var i = 0; i < params.length; i++) {
                html += params[i].seriesName + ' : ' + params[i].value + '<br>';
            }
            html += '</div>';
            html += '<select id="select">';
            html += '<option value="A">A</option>';
            html += '<option value="B">B</option>';
            html += '<option value="C">C</option>';
            html += '<option value="D">D</option>';
            html += '<option value="E">E</option>';
            html += '</select>';
            return html;
        }
    }
};

// 设置配置项
myChart.setOption(option);

// // 监听 select 选择器的 change 事件
// document.getElementById('select').addEventListener('change', function () {
//     var selectedValue = this.value;
//     console.log('选中的值：', selectedValue);
//     // 调用接口并获取选中的数据
// });