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

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

效果图

image.png

image.png

代码部分

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: {
                type: 'category',
                triggerEvent: true,
                // data: ['风电', '光伏'],
                data: xAxisData,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: "#FFFFFF",
                    fontSize: '14',
                    // interval: 0,
                    // rotate: rotate//文字旋转角度
                },
                axisTick: {
                    // show: false,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#0C4F81',
                        type: 'solid'
                    }
                },
            },
            yAxis: {
                type: 'value',
                nameTextStyle: {
                    color: '#4F88BD',
                    padding: [0, 25, -5, 0],
                    fontSize: 12,
                    fontFamily: 'Microsoft YaHei',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#0C4F81"
                    }
                },
                axisLabel: {
                    color: "#4F88BD",
                    fontSize: '12',
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        type: "dotted",
                        color: "#0C4F81"
                    }
                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name: '2019',
                    type: 'bar',
                    barMaxWidth: 80,
                    stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'top',
                                color: '#ffffff'
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgba(25, 186, 255, 1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(85, 243, 174, 1)"
                            }
                            ]),
                        }
                    },
                    data: yAxisData1
                },
                {
                    name: '2020',
                    type: 'bar',
                    barMaxWidth: 80,
                    stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'top',
                                color: '#ffffff'
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "rgba(255, 74, 140, 1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(253, 129, 132, 1)"
                            }
                            ]),
                        }
                    },
                    data: yAxisData2
                },
                {
                    name: '2021',
                    type: 'bar',
                    barMaxWidth: 80,
                    stack: 'Ad',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: 'top',
                                color: '#ffffff'
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#F6F68C"
                            },
                            {
                                offset: 1,
                                color: "#FC8F3E"
                            }
                            ]),
                        }
                    },
                    data: yAxisData3
                },
            ]
        };
        this.myChart.clear();
        this.myChart.setOption(option);
        this.echarClickfun(this.myChart);
    },
    //图表点击事件封装
    //
    echarClickfun(myChart) {
        var _this = this;
        myChart.off('click');
        myChart.on('click', function (params) {
            if (params.componentType == "xAxis") {//点击x轴标签xAxis
                _this.getchart(params.value);
            } else if(params.componentType == "yAxis") {//点击y轴标签yAxis
                _this.getchart(params.value);
            } else {//点击柱子柱子
            }
        })
    },
    //获取二级数据重新渲染
    getchart(data) {
       ajaxGet('接口地址', { "province": data }, res => {
            if (res.state !== 1) {
                this.$message({
                    message: res.value || '接口报错',
                    type: 'error'
                });
                return;
            }
            var echartData = res.value || [];//获取二级数据
            this.mychart1(echartData);
        })  
    }
}

注:echarClickfun里边点击事件根据自己实际情况写就可以,我这里是把三种情况都列举出来了,这里还需要一个默认图表一级数据,大家真正实际写的时候加上获取接口数据就好了。

感谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕💕💕
目录
相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
183 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
157 23
echarts地图数据信息流向图效果
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
113 2
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
65 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
306 0
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
479 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
505 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示

热门文章

最新文章