当前位置：首页 > news >正文

vue+echart :点击趋势图中的某一点或是柱状图，出现弹窗，并传输数据

news 2025/7/26 20:54:54

样式

在趋势图中点击某一个柱状图，出现下面的弹窗
在这里插入图片描述

代码实现

主要是在趋势图页面代码中，在初始化趋势图的设置中，添加对趋势图监听的点击方法

drawChart() {const chartData = this.chartData;let option = {};if (!chartData.xData?.length) {option = {title: {text: "暂无数据",x: "center",y: "center",textStyle: {fontSize: 16,fontWeight: "normal",color: "rgba(0, 0, 0, 0.5)",},},};} else {option = {tooltip: {........}},grid: {top: "12%",bottom: "18%",left: 27,right: 35,containLabel: true,},legend: {bottom: 0,lineStyle: {type: "solid",},},xAxis: [......],yAxis: this.yAxisContent,series: this.seriesContent,};this.chart.clear();this.chart.setOption(option);this.chart.resize();// 重点的代码， 当点击时，获取到params参数this.chart.on("click", (params) => {this.contentByTooltip(params);});},// 当点击趋势图时， 调用的方法
contentByTooltip(params) {// 设置传向弹窗的propsthis.loginFailData = {}this.loginFailData.startTime = this.chartData.startTime;this.loginFailData.endTime = this.chartData.endTime;  this.loginFailData.trendType = this.chartType;this.loginFailData.districtCode = this.paramsData.districtCode;this.loginFailData.provinceCode = this.paramsData.provinceCode;this.loginFailData.areaType = this.paramsData.areaType;this.loginFailData.loginType = this.paramsData.loginType;this.loginFailData.xdata = params.name;this.loginFailData.data = { label: params.name, value: params.data };//设置弹窗的显隐this.loginFailDialogVisible = true;},// template 弹窗的组件以及传值， 这儿使用v-if来控制弹窗的显示与隐藏，避免首次加载页面过慢<LoginFailDialogv-if="loginFailDialogVisible":loginFailData="loginFailData"loginFailMark="loginTrend"@handleClose="loginFailDialogVisible = false"></LoginFailDialog>