onclick event

[raynoro]

Came across your quasar-echarts demo.

How could I make use of the onclick event on bar or pie chart? For example if I were to click on a bar, then I could get some details such as the category, data, etc.

I've tried referring to this but doesn't work
https://echarts.apache.org/en/api.html#events.Mouse%20events

[pratik227]

Hi @raynoro,

Here is an example of the click event on the bar chart.

<template>
  <div>
    <q-card>
      <q-card-section class="text-h6">
        Bar Chart
        <q-btn icon="fa fa-download" class="float-right" @click="SaveImage" flat dense>
          <q-tooltip>Download PNG</q-tooltip>
        </q-btn>
      </q-card-section>
      <q-card-section>
        <div ref="barchart" id="barChart" style="height: 250px;"></div>
      </q-card-section>
      <q-resize-observer @resize="onResize"/>
    </q-card>
  </div>
</template>

<script>
export default {
  name: "BarChart",
  data() {
    return {
      model: false,
      options: {
        legend: {
          bottom: 10,
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '5%',
          containLabel: true
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {type: 'bar'},
          {type: 'bar'},
          {type: 'bar'}
        ]
      },
      bar_chart: null
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    '$q.dark.isActive': function () {
      this.init();
    }
  },
  methods: {

    SaveImage() {
      const linkSource = this.bar_chart.getDataURL();
      const downloadLink = document.createElement('a');
      document.body.appendChild(downloadLink);

      downloadLink.href = linkSource;
      downloadLink.target = '_self';
      downloadLink.download = 'BarChart.png';
      downloadLink.click();
    },
    init() {
      let barChart = document.getElementById('barChart');
      echarts.dispose(barChart);
      let theme = this.model ? 'dark' : 'light';
      this.bar_chart = echarts.init(barChart, theme);
      this.bar_chart.setOption(this.options)

      this.bar_chart.on('click', function (params) {
        // printing data name in console
        console.log(params.name);
      });
    },
    onResize() {
      if (this.bar_chart) {
        this.bar_chart.resize();
      }
    }
  }
}
</script>

<style scoped>

</style>

Please let me know if you have any questions.

Thanks,
Pratik

[raynoro]

Got it to work, thanks!