Echarts 图表点击x轴y轴切换图表二级数据

最新推荐文章于 2024-07-18 15:15:36 发布

蚂蚁二娘

最新推荐文章于 2024-07-18 15:15:36 发布

阅读量645

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/web2022050901/article/details/124983420

版权

这篇博客分享了如何在Echarts中实现点击x轴或y轴切换图表展示二级数据的方法，包括效果图和关键代码展示。作者鼓励读者互动点赞和留言，共同学习进步。

摘要由CSDN通过智能技术生成

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~

效果图

代码部分

methods: {
    mychart1(data) {
        this.myChart = echarts.init(document.getElementById('profitTotal'));
        let echartData = [];
        if(data) {
            echartData = data;
        } else {
            echartData = [];
        }
        let xAxisData = echartData.map(v => v.name);
        let yAxisData1 = echartData.map(v => v.value1);
        let yAxisData2 = echartData.map(v => v.value2);
        let yAxisData3 = echartData.map(v => v.value3);
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2019', '2020','2021'],
                orient: "horizontal",//vertical
                x: 'center',
                // y: 'bottom',
                // right: '-50%',
                bottom: '4%',
                icon: "roundRect",
                selectedMode: false,//取消图例上的点击事件
                itemWidth: 16,  // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 10,// 设置间距