如果实现一个简单的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>