如果实现一个简单的echarts柱状图，并添加点击事件

话不多说，直接上代码：

<template>
  <div>
      <div id="recentFourReasonData" class="echart"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.drawRecentFourReasonData();
  },
  methods: {
    drawRecentFourReasonData() {
      let myChart = this.$echarts.init(
        document.getElementById("recentFourReasonData")
      );
      myChart.setOption({
        title: {
          text: "2020年的收入数据（单位：万元）"
        },
        color: ["blue"],
        xAxis: [
          {
            type: "category",
            data: ["第一季度", "第二季度", "第三季度", "第四季度"]
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {show:true},
            axisTick: {show:true},
          }
        ],
        series: [
          {
            type: "bar",
            data: [14, 17, 11, 6]
          },
        ]
      });
      myChart.on('click', res=>{
        alert(`当前是${res.name}，值是${res.data}`)
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.echart {
  width: 100%;
  height: 500px;
}
</style>