<script>
export default {
  data() {
    return {
      width: '600px',
      height: '400px',
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      },
      options2: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
    }
  },
  methods:{
    onInitCompleted(echartsObj){
        // console.log("echartsObj:::",echartsObj)
    }
  }
}
</script>
# Echarts

### import {Echarts} from zhidian-ui

:::demo
```html
<template>
    <echarts :height="height" :width="width" :options="options"></echarts>
</template>
```
```javaScript
<script>
    export default {
      data() {
        return {
          width: '600px',
          height: '400px',
          options: {
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
              data: ["衬衫1", "羊毛衫1", "雪纺衫1", "裤子1", "高跟鞋1", "袜子1"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          }
        }
      }
    }
</script>
```
:::

### 坐标轴刻度与标签对齐

:::demo 
```html
<template>
    <echarts :height="height" :width="width" :options="options2" @on-init-completed="onInitCompleted"></echarts>
</template>
```
```javaScript
<script>
export default {
  data() {
    return {
      width: '600px',
      height: '400px',
      options2: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
    }
  },
  methods:{
    onInitCompleted(echartsObj){
        // console.log("echartsObj:::",echartsObj)
    }
  }
}

</script>
```
:::

### Echarts Attributes
| 参数      | 说明          | 类型      | 可选值       | 默认值  |
|---------- |------------- |---------------|------------  |-------- |
| height | 高 | `String` | 百分比 或则 像素值 | — |
| width | 宽 | `String` | 百分比 或则 像素值 | — |
| options | echarts 插件 option 参数，具体请参考 [Echarts](http://echarts.baidu.com/examples.html) | `Object` | — | — |
| @on-init-completed | echarts 渲染完成后回调事件 | `Function` | — | — |


