柱状图点击事件

做为前端人员,难免会被产品虐出暴脾气,甚至早已有小伙伴偷偷在键盘下藏了菜刀,你脑海中浮现着产品跪地求饶样子…(此处省略无限字)
咳~醒醒

效果图(点击查看)

设计往往天马行空,这就苦了我们这些老实本分的前端同学,比如说,产品需求是这样的

日常效果却是这样的

难度加倍,而薪资却不加倍,一个悲伤的故事,
在杀死无数脑细胞后,终于完成

var data0 = [0, 0, 0, 0, 0, 0, 0]
var data = [60, 85, 110, 160, 90, 80, 190]
var xdata = ['06-02', '06-03', '06-04', '06-05', '06-06', '06-07', '06-08']
// 定义变量xIndex 表示X轴序号, Ymonth 表示柱状图的label值
var xIndex,Ymonth

option = {
    // 关闭提示框, 替换为柱状图的点击事件
    tooltip: {
        trigger: "none"
    },
    title: {
        text: "收益趋势图",
        subtext: '用散点图代替柱状图两端点,并给柱状图添加点击事件,简约风格,很适合移动端',
        textStyle: {
            color: "#010001",
            fontSize: 26
        },
        subtextStyle: {
            color: "#5B5BFA",
            fontSize: 14
        },
        left: 'center',
        top: "15%"
    },
    grid: {
        left: "10%",
        top: "35%",
        bottom: "15%",
        right: "10%",
        containLabel: true
    },
    xAxis: {
        data: xdata,
        type: 'category',
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#383738',
            fontSize: 14,
            margin: 20
        }
    },
    yAxis: {
        type: 'value',
        splitNumber: 4,
        interval: 50,
        splitLine: {
            show: true,
            lineStyle: {
                color: '#D5D5D5',
                type: 'dashed'
            }
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#383738',
            fontSize: 14
        }
    },
    series: [{
            type: 'bar',
            barWidth: 4,
            data: data,
            color: ['#F14845'],
            label: {
                show: true,
                position: 'top',
                // 标签刻度值位置
                offset: [0, -15],
                fontSize: 16,
                formatter: function(params) {
                    // 判断收益是否大于0, 或者是否对应当前数据
                    if(params.value === 0 || params.value !== Ymonth) {
                        return ''
                    } else {
                        return params.value
                    }
                }
            }
        },
        {
            type: 'scatter',
            symbolSize: 8,
            itemStyle: {
                borderWidth: 2.5,
                borderColor: '#F14845',
                color: "#fff",
                opacity: 1
            },
            silent: true,
            data: data0
        },
        {
            type: 'scatter',
            symbolSize: 8,
            itemStyle: {
                borderWidth: 2.5,
                borderColor: '#F14845',
                color: "#fff",
                opacity: 1
            },
            silent: true,
            data: data
        }

    ]
}

// 重点来了，敲小黑板
// 给每条数据的热区增加点击事件
myChart.getZr().on('click', function(params) {
    var pointInPixel= [params.offsetX, params.offsetY]
    if (myChart.containPixel('grid', pointInPixel)) {
        var pointInGrid = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel)
        // X轴序号
        xIndex = pointInGrid[0]
        // 获取当前图表的option
        var op = myChart.getOption()
        // 获得图表中我们想要的数据
        Ymonth = op.series[0].data[xIndex]
        // console.log('点击了第' + xIndex + '条数据')
        myChart.setOption({
            xAxis: [{
                axisLabel: {
                    textStyle: {
                        color: function(value, index) {
                            return index === xIndex ? '#F14845' : '#383738'
                        }
                    }
                }
            }]
        })
    }
})

最终效果图

最近有小伙伴问我,当使用了dataZoom卷动echart图表后,横坐标的index错位的情况,因为我当前需求不涉及dataZoom,现在既然提到,那就来解决好了,其实很简单

将红色圈起部分改成

return value === xdata[xIndex] ? '#F14845' : '#383738'

分析原因, 前面求出的xIndex值是没错的,卷动情况下x轴index既然不管用,那就用value值去判断