let that = this
let ClickName = '' //点击获取到的name
ClickName = this.XAxis[0]
xAxis: [
{
triggerEvent: true,//控制X轴是否可以点击
type: "category",
data: this.XAxis,
axisPointer: {
type: "shadow",
},
axisLabel: {
show: true,
color: function (value, index) {
return value == ClickName ? '#21aced' : '#b5b5b5';
}, //控制X轴是否可以点击 修改点击的颜色
clickable: true,//
formatter: function (val) {
if (val) {
return `${val.substring(5)}`
}
}
},
axisLine: {
lineStyle: {
// color: "#3398DB" //蓝色
color: "#b5b5b5", //灰色
},
},
},
],
//点击x轴线
this.chart.getZr().on('click', params => {
const pointInPixel = [params.offsetX, params.offsetY]
if (this.chart.containPixel('grid', pointInPixel)) {
const xIndex = this.chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
ClickName = option.xAxis[0].data[xIndex]
this.chart.resize();
this.bus.$emit('ClickName', ClickName)
// console.log('ClickName', ClickName)
}
})
//点击x轴坐标
this.chart.on('click', 'xAxis.category', function (params, node) {
ClickName = params.value
that.chart.resize();
this.bus.$emit('ClickName', ClickName)
// console.log('ClickName', ClickName)
});
主要就是改动这三处地方 然后通过事件总线把点击的这个值传出去
获取对应索引去播放视频而已
this.bus.$on('ClickName', data => {
console.log(data);
let a = this.chartInfo.XAxis.findIndex(item => {
return item == data
})
let item = {
indexCode: this.littleNames[a]
}
this.$nextTick(() => {
this.$refs.FXPagevideo.newcheckeed(item)
})
})