echarts点击跳转页面

柱状图点击事件  

// 假设你已经初始化了echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80],
        type: 'bar',
        // 设置柱子的颜色，可以和页面的主题色对应
        itemStyle: {
            color: '#5470c6'
        }
    }]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
 
// 监听图表的点击事件
myChart.on('click', function (params) {
    // 获取点击的系列的索引
    var seriesIndex = params.seriesIndex;
    // 获取点击的数据的索引
    var dataIndex = params.dataIndex;
    // 根据索引获取相应的数据
    var xAxisValue = myChart.getOption().xAxis[0].data[dataIndex];
    
    // 这里可以根据 xAxisValue 或 seriesIndex 来决定跳转到哪个页面
    // 例如，这里以跳转到一个以 A, B, C, D 作为参数的页面的URL示例
    var url = 'http://yourwebsite.com/page?param=' + xAxisValue;
    
    // 跳转页面
    window.location.href = url;
});

饼状图点击跳转事件

// 假设你已经初始化了echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据
var option = {
 
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
 
// 监听图表的点击事件
myChart.on('click', function (params) {
 this.$router.push('/index')
});