做网站企业的发展前景,学校网站规划,个人性质网站名称,我的世界做皮肤壁纸网站样式
在趋势图中点击某一个柱状图#xff0c;出现下面的弹窗
代码实现
主要是在趋势图页面代码中#xff0c;在初始化趋势图的设置中#xff0c;添加对趋势图监听的点击方法
drawChart() {const chartData this.chartData;let option {};if (!chartData.xData?.len…样式
在趋势图中点击某一个柱状图出现下面的弹窗
代码实现
主要是在趋势图页面代码中在初始化趋势图的设置中添加对趋势图监听的点击方法
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-ifloginFailDialogVisible:loginFailDataloginFailDataloginFailMarkloginTrendhandleCloseloginFailDialogVisible false/LoginFailDialog
