echarts 图表添加点击事件

最新推荐文章于 2024-10-10 11:48:28 发布

zxmin1302

最新推荐文章于 2024-10-10 11:48:28 发布

阅读量3.3w

点赞数 5

分类专栏： web前端

本文链接：https://blog.csdn.net/zxmin1302/article/details/85783757

版权

web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

var mychartsale= echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data:['交易指数','交易增长幅度','支付转化指数','流量指数','搜索人气']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeData
            },
            yAxis : [
                {
                    name: '指数',
                    type : 'value',
                    scale:true,
                },
                {
                    name: '百分比',
                    type : 'value',
                    scale:true,
                    axisLabel: {  
                        show: true,    
                        formatter: '{value} %'  
                    }
                }
            ],
            series: [
                {
                    name:'交易指数',
                    type:'line',
                    stack: '',
                    data:data1,
                    yAxisIndex:0
                },
                {
                    name:'交易增长幅度',
                    type:'line',
                    stack: '',
                    data:data2,
                    yAxisIndex:1,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                positiong: 'top',
                                formatter: '{c}%'
                            }
                        }
                    }
                },
                {
                    name:'支付转化指数',
                    type:'line',
                    stack: '',
                    data:data3,
                    yAxisIndex:0
                },
                {
                    name:'流量指数',
                    type:'line',
                    stack: '',
                    data:data4,
                    yAxisIndex:0
                },
                {
                    name:'搜索人气',
                    type:'line',
                    stack: '',
                    data:data5,
                    yAxisIndex:0
                }
            ]
        };

        mychartsale.setOption(option);
        //注释的功能，是判断点击折线图的拐点。
        mychartsale.on('click', function (param) {
            console.log(param);//这里根据param填写你的跳转逻辑
        });
        window.addEventListener("resize",function(){
            mychartsale.resize(); 
        });

点击echarts的拐点或者区域，打印出相关的拐点信息，可以延伸在点击事件中添加新的方法。、