VUE3 echarts增加点击事件

问题描述

获取当前点击柱状图的数据，调取接口渲染饼图

<template>
    <div style="width: 100%; height: 100%" ref="chartsOne"></div>
</template>

<script setup lang="ts">
import useEcharts from '@/hooks/useEcharts'

const chartsOne: any = $ref(null)
let barOptions = $ref({
  color: colorList,
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    // itemGap: 120,
    itemHeight: 10,
    borderRadius: 5,
    data: []
  },
  grid: {
    left: '5%',
    right: '1%',
    bottom: '0%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#DADADA',
        type: 'dashed'
      }
    },
    axisTick: {
      show: false
    },
    data: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06', '2023-01-12']
  },
  yAxis: {
    name: '异常工时(分钟)',
    splitLine: {
      lineStyle: {
        color: '#DADADA',
        type: 'dashed'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#DADADA',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '工位-R001',
      type: 'bar',
      stack: 'Total',
      barWidth: 20,
      itemStyle: {
        borderWidth: 10,
        barBorderRadius: 10
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '工位-R002',
      type: 'bar',
      stack: 'Total',
      barWidth: 20,
      itemStyle: {
        borderWidth: 10,
        barBorderRadius: 10
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '工位-R003',
      type: 'bar',
      stack: 'Total',
      barWidth: 20,
      itemStyle: {
        borderWidth: 10,
        barBorderRadius: 10
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '工位-R004',
      type: 'bar',
      stack: 'Total',
      barWidth: 20,
      itemStyle: {
        borderWidth: 10,
        barBorderRadius: 10
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    }
  ],
})
onMounted(() => {
  nextTick(() => {
    let { chartInstance } = useEcharts(chartsOne, barOptions)
    chartInstance.on('click', params => {
      let info = {
        checkStationId: queryForm.checkStationId,
        checkUsername: queryForm.checkUsername,
        startTime: params.name,
        endTime: params.name
      }
     // 饼图报表获取数据
      getPieData(info)
    })
  })
})
</script>

---

在hooks文件夹中创建useEcharts文件

import * as echarts from 'echarts'
let useEcharts = (el, options) => {
  let chartInstance = null
  chartInstance = echarts.init(el)
  chartInstance.setOption({ ...options })
  window.addEventListener('resize', chartInstance.resize)
  watchEffect(() => {
    chartInstance && chartInstance.setOption({ ...options })
  })
  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
      window.removeEventListener('resize', chartInstance.resize)
    }
  })
  return {
    chartInstance
  }
}
export default useEcharts