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

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

效果图

Echarts 图表点击x轴y轴切换图表二级数据_第1张图片

Echarts 图表点击x轴y轴切换图表二级数据_第2张图片

代码部分

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,// 设置间距
                textStyle: {//文字根据legend显示 
                    color: "#FFFFFF",
                    fontSize: 12,
                },
            },
            grid: {
                left: '15%',
                top: '20%',
                right: '8%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                ty

你可能感兴趣的:(echarts,javascript,ecmascript)