|
drawBar(){ // 告警次数TOPN 柱状图 // 基于准备好的dom，初始化echarts实例 let ref = this.$refs.bar if (ref && ref !== undefined) { let myChart = this.$echarts.init(ref) // 绘制图表 myChart.setOption({ color: ['#f16e6b'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '10%', right: '10%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: this.date_x, name: '终端编号' } ], yAxis: [ { type: 'value' } ], series: [ { type: 'bar', stack: '告警', data: this.date_y } ] }); // 方式一：点击有数据的条形柱体查询相关U盘id，获取对应U盘id的列表数据 // myChart.on('click', (params) => { // this.getAlertList(parseFloat(this.risk_value), params.name) // }) // 方式二：整条柱体的点击事件（如果要实现获取id的效果，则需要拿到series的数组，再通过index拿到对应的数据对象） myChart.getZr().on('click', (params) => { const pointInPixel = [params.offsetX, params.offsetY]; if (myChart.containPixel('grid', pointInPixel)) { let xIndex = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0] this.getAlertList(parseFloat(this.risk_value), this.date_x[xIndex]) } }) // getZr()方法可以监听到整个画布的点击事件，zIndex是被点击的柱体的index } },
|