echarts點擊柱狀圖帶參數跳轉到指定頁面（路由）
項目開發者常用echarts來實現數據可視化功能。上次遇到了一個問題，就是通過後臺返回的數據渲染echarts數據完成後需要點擊柱形圖圖標的時候跳轉制定的新的頁面展示（當然新的頁面內容，後臺通過柱形圖的參數來給我們返回過來的）
1，引入echarts
2，準備渲染echarts的區域div
3，通過後臺數據渲染數據
init2(arr) {
let labelData = []
let valueData = []
let num = 0
arr.forEach(item => {
labelData.push(item.label)
valueData.push(item.value)
num += parseInt(item.value)
})
labelData.push('')
valueData.push(0)
// 基於準備好的dom，初始化echarts實例
this.myChart1 = echarts.init(document.getElementById('echart1'));
let option1 = {
title: {
text: '數據不合格數量: ' + num,
left: 'center'
},
xAxis: {
type: '',
data: labelData,
axisLabel: {
interval: 0,
rotate: -15
},
name: "（公司）"
},
yAxis: {
type: 'value',
name: "（數量）",
},
series: [
{
name: '銷量',
data: valueData,
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: [4, 4, 0, 0],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: '#1FB9CE' },
{ offset: 1, color: '#0846A3' },
])
}
},
label: {
show: true,
position: 'top'
},
}
]
}
// 繪製圖表
this.myChart1.setOption(option1)
// ------echarts點擊事件獲取對應的index和公司名稱-------------
// echarts點擊事件獲取對應的index和公司名稱---跳轉對應的數據覈查頁面ok
this.myChart1.getZr().on('click', params => { // 柱形圖點擊事件
var pointInPixel = [params.offsetX, params.offsetY]
// 判斷給定的點是否在指定的座標系
if (this.myChart1.containPixel('grid', pointInPixel)) {
const xIndex = this.myChart1.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
const option = this.myChart1.getOption()
const xAxis = option.xAxis
const name = xAxis[0].data[xIndex]
console.log(xIndex)
console.log(name)
// console.log('--------打印index和公司名稱-----------------')
if (name !== undefined || name === '') { // 非空校驗，防止沒數據點擊空白圖表跳轉
// 路由跳轉傳參
this.$router.push({
path: 'dataVerification',
query: {
echartsIndex: xIndex, //index值
echartsName: name, //公司名稱
}
})
console.log(this.$route.query)
}
}
})
// -------------------
window.addEventListener("resize", () => {
this.myChart1.resize();
});
},4，實現點擊柱形圖圖標帶參數跳轉制定頁面(核心代碼)
// echarts點擊事件獲取對應的index和公司名稱---跳轉對應的數據覈查頁面ok
this.myChart1.getZr().on('click', params => { // 柱形圖點擊事件
var pointInPixel = [params.offsetX, params.offsetY]
// 判斷給定的點是否在指定的座標系
if (this.myChart1.containPixel('grid', pointInPixel)) {
const xIndex = this.myChart1.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
const option = this.myChart1.getOption()
const xAxis = option.xAxis
const name = xAxis[0].data[xIndex]
console.log(xIndex)
console.log(name)
// console.log('--------打印index和公司名稱-----------------')
if (name !== undefined || name === '') { // 非空校驗，防止沒數據點擊空白圖表跳轉
// 路由跳轉傳參
this.$router.push({
path: 'dataVerification',
query: {
echartsIndex: xIndex, //index值
echartsName: name, //公司名稱
}
})
console.log(this.$route.query)
}
}
})
5，跳轉完成-再新的頁面接受參數
