<template>
  <section class="App">
    <BarEchart :data="data" :set-config="handlerSetConfig" />
  </section>
</template>

<script lang="ts">
import {BarEchart} from '../lib/index.es.js';
import { Vue, Component } from 'vue-property-decorator';

/**
 * @author: wukangjun
 * @since: 2018-12-05
 * @router('/App')
 */
@Component({
  components: { BarEchart }
})
export default class App extends Vue {
  public static NAME: string = 'App';
  public data: any = 0;

  public mounted() {
    this.data = 1;
  }

  public handlerSetConfig(echartsChain: any, data: any) {
    echartsChain
      .property('title')
        .setOptions((config: any) => {
          return {
            text: 'ECharts 入门示例'
          }
        })
      .property('xAxis')
        .setOptions((config: any, echarts: any) => {
          return {
            data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
          }
        })
      .property('series')
        .setOptions((config: any) => {
          return [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }];
        })
  }
}

</script>

<style lang="scss">

</style>