echarts 柱状图--柱体的点击事件_echart 柱状图点击事件

<template>
    <el-card class="current-sort-line-ratio-div">
        <div class="current-sort-line-ratio-title-div">
            <span>{{ `各分类线路本周期${CurClickRatioCard.label1}` }}</span>
            <el-tooltip class="item" effect="dark" placement="bottom">
                <i class="el-icon-info"></i>
                <div slot="content">{{ `自本周期线路下发日开始统计线路累计的${CurClickRatioCard.label1}` }}</div>
            </el-tooltip>
            <el-button v-if="!showBarChartRef" class="btn-div" size="small" @click="handleClick">返回上层</el-button>
        </div>
 
        <el-divider></el-divider>
        <div v-show="showBarChartRef" id="BarChartRef" class="bar-chart-div"></div>
        <div v-show="!showBarChartRef" id="clickBarChartRef" class="bar-chart-div"></div>
    </el-card>
</template>
 
<script>
import echarts from 'echarts'
import { barOntimeRateByType, getOntimeRateOfRegionalControl } from '@/api/agingSystem/agingSystem'
export default {
    props: {
        formDataObj: { type: Object, default: () => ({}) },
        CurClickRatioCard: {
            type: Object,
            default: () => ({
                index: 1,
                isClick: true,
                value1: 'onTimeRate',
                label1: '准点率',
                value2: 'onTimeRateDiffRate',
                label2: '基比',
                value3: 'basicOnTimeRate',
                label3: '基准准点率',
            }),
        },
    },
    data() {
        return {
            chartObj: null,
            clickChartObj: null,
            dataList: [],
            showBarChartRef: true,
        }
    },
    watch: {
        formDataObj() {
            this.chartObj.clear()
            this.showBarChartRef = true
            this.asyncGetListEtaTaskScrollProp(this.CurClickRatioCard)
        },
        CurClickRatioCard(val) {
            this.asyncGetListEtaTaskScrollProp(val)
        },
    },
 
    mounted() {
        this.chartObj = echarts.init(document.getElementById('BarChartRef'))
    },
 
    methods: {
        handleClick() {
            this.showBarChartRef = true
        },
        asyncGetListEtaTaskScrollProp(clickData) {
            const params = {
                taskAreaCode: this.formDataObj.taskAreaCode,
                updateTime: this.formDataObj.updateTime,
            }
            barOntimeRateByType(params)
                .then(res => {
                    this.showBarChartRef = true
                    this.dataList = res.data.reduce((s, i) => {
                        s.push([i.splitTagNewType, parseFloat(i[clickData.value3]), parseFloat(i[clickData.value1])])
                        return s
                    }, [])
                    const option = this.barChartOptions(this.dataList)
                    this.chartObj.setOption(option)
                    this.clickBarChartOptions()
                })
                .catch(e => {
                    console.log(e)
                })
        },
        formatterDiQuData(row, basicValue, newValue) {
            return [
                [row[1].splitTagNew, parseFloat(row[1][basicValue]), parseFloat(row[1][newValue])],
                [row[0].splitTagNew, parseFloat(row[0][basicValue]), parseFloat(row[0][newValue])],
            ]
        },
        clickBarChartOptions() {
            this.chartObj.off('click')
            this.chartObj.on('click', params => {
                if (this.clickChartObj) {
                    this.clickChartObj.clear()
                }
                this.showBarChartRef = false
                if (params.name == '地区管控') {
                    const params = {
                        taskAreaCode: this.formDataObj.taskAreaCode,
                        updateTime: this.formDataObj.updateTime,
                    }
                    getOntimeRateOfRegionalControl(params).then(res => {
                        let clickData
                        if (res.success && res.data.length) {
                            clickData = this.formatterDiQuData(
                                res.data,
                                this.CurClickRatioCard.value3,
                                this.CurClickRatioCard.value1,
                            )
                            this.$nextTick(() => {
                                this.clickChartObj = echarts.init(document.getElementById('clickBarChartRef'))
                                const row = this.barChartOptions(clickData)
                                this.clickChartObj.setOption(row)
                            })
                        }
                    })
                } else {
                    this.$nextTick(() => {
                        this.clickChartObj = echarts.init(document.getElementById('clickBarChartRef'))
                        const row = this.barChartOptions([params.data])
                        this.clickChartObj.setOption(row)
                    })
                }
            })
        },
        barChartOptions(rowData) {
            return {
                color: ['#50D9EB', '#2196F3'],
                legend: {
                    itemGap: 40,
                    itemWidth: 14,
                    itemHeight: 14,
                    right: 40,
                    textStyle: {
                        fontSize: 14,
                        color: '#333',
                    },
                    selectedMode: false, //控制是否可以通过点击图例改变系列的显示状态
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                    backgroundColor: '#373F57',
                    itemWidth: '20px',
                },
                grid: {
                    left: '6%',
                },
                dataset: {
                    source: [['product', '基准', '最新'], ...rowData],
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#666',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisPointer: {
                        type: 'line',
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '占比',
                    max: 100,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#666',
                        },
                    },
                    axisTick: {
                        show: true,
                    },
                    splitNumber: 5,
                    minInterval: 20,
                    // maxInterval: 20,
                    axisLabel: {
                        formatter: function(val) {
                            return val + '%'
                        },
                    },
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                label: {
                                    textStyle: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            },
                        },
                    },
                    {
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                label: {
                                    textStyle: {
                                        fontSize: 12,
                                        fontWeight: 400,
                                    },
                                },
                            },
                        },
                    },
                ],
            }
        },
    },
}
</script>
 
<style lang="scss" scoped>
.current-sort-line-ratio-div {
    width: 49.6%;
 
    .current-sort-line-ratio-title-div {
        position: relative;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333333;
        font-weight: 700;
        .el-icon-info {
            color: #2970ff;
        }
        .btn-div {
            position: absolute;
            right: 10px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333333;
        }
    }
 
    .el-divider--horizontal {
        margin: 18px 0;
    }
    .bar-chart-div {
        margin-top: 20px;
        height: 350px;
    }
}
</style>