echarts鼠标事件echarts 柱状配置项内容和展示

点击图例,用获取的数据动态建立新的图表

配置项如下
      option = {
    grid:[
        {x:200,y:150,width:800,height:300,containLabel:true,},
        {x:20,y2:20,width:80,height:600,containLabel:true,},
        
        ],
    xAxis: [{
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        gridIndex:0,
    },{gridIndex:1,type:'category',name:'category',data:[]}],
    yAxis: [{
        gridIndex:0
    },{
        gridIndex:1,name:'value'
    }],
    series: [{
        gridIndex:0,
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{
        gridIndex:1,
        type:'bar',
        name:'bar2',
        right:10,
        width:100,
        height:100,
        data:[],
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
        myChart.setOption({
            series: [{
                name: 'bar2',
                xAxisIndex:1,
                yAxisIndex:1,
                // 通过饼图表现单个柱子中的数据分布
                data: [{name:params.name,value:params.data}]
            }]
    });
});
    
截图如下