EtChart example:

- 入门示例

```vue
<template>
  <div style="height: 400px;">
    <et-chart :option="option"></et-chart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    }
  },
}
</script>
```

- 折线图

```vue
<template>
  <div style="height: 400px;">
    <et-chart :option="option"></et-chart>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    const data = [
      {
        timestamp: 1617723000,
        likeCount: 170817,
        starCount: 170817,
        commentCount: 2462,
      },
      {
        timestamp: 1617809400,
        likeCount: 170828,
        starCount: 131349,
        commentCount: 2463,
      },
      {
        timestamp: 1617895800,
        likeCount: 170840,
        starCount: 132361,
        commentCount: 2463,
      },
    ]

    const source = data.map((item) => {
      item.timestamp = dayjs.unix(item.timestamp).format('YYYY-MM-DD HH:mm:ss')
      return item
    })

    return {
      option: {
        dataset: {
          dimensions: ['timestamp', 'likeCount', 'starCount', 'commentCount'],
          source,
        },
        legend: {
          data: ['点赞数', '收藏数', '评论数'],
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: false,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: '日期',
        },
        yAxis: {
          type: 'value',
          name: '数量',
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: '点赞数',
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
          },
          {
            name: '收藏数',
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
          },
          {
            name: '评论数',
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
          },
        ],
      },
    }
  },
}
</script>
```

- 柱状图

```vue
<template>
  <div style="height: 200px; width: 600px;">
    <et-chart :option="option"></et-chart>
  </div>
</template>
<script>
export default {
  data() {
    const data = {
      presetTotalCount: 125,
      actualTotalCount: 18,
      presetProgressVO: [
        {
          presetValue: 1,
          tag: '<1万',
        },
        {
          presetValue: 45,
          tag: '1万-10万',
        },
        {
          presetValue: 35,
          tag: '10万-50万',
        },
        {
          presetValue: 18,
          tag: '50万-100万',
        },
        {
          presetValue: 26,
          tag: '100万+',
        },
      ],
      actualProgressVO: [
        {
          presetValue: 3,
          tag: '<1万',
        },
        {
          presetValue: 1,
          tag: '1万-10万',
        },
        {
          presetValue: 8,
          tag: '10万-50万',
        },
        {
          presetValue: 1,
          tag: '50万-100万',
        },
        {
          presetValue: 6,
          tag: '100万+',
        },
      ],
    }

    const source = [
      ['', ...data.presetProgressVO.map((i) => i.tag)],
      ['计划', ...data.presetProgressVO.map((i) => i.presetValue)],
      ['实际', ...data.actualProgressVO.map((i) => i.presetValue)],
    ]

    return {
      option: {
        color: ['#5bb5ef','#cf625e'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: false,
        },
        dataset: {
          source,
        },
        title: {
          text: '达人投放进度',
          left: 'center',
        },
        legend: {
          data: ['计划', '实际'],
          icon: 'circle',
          right: 0,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          name: '粉丝量',
        },
        yAxis: {
          type: 'value',
          name: '人数',
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: '计划',
            type: 'bar',
            seriesLayoutBy: 'row',
            barWidth: '20',
          },
          {
            name: '实际',
            type: 'bar',
            seriesLayoutBy: 'row',
            barWidth: '20',
          },
        ],
      },
    }
  },

  mounted() {
    setTimeout(() => {
      const data = {
        presetTotalCount: 125,
        actualTotalCount: 18,
        presetProgressVO: [
          {
            presetValue: 2,
            tag: '<1万',
          },
          {
            presetValue: 55,
            tag: '1万-10万',
          },
          {
            presetValue: 45,
            tag: '10万-50万',
          },
          {
            presetValue: 28,
            tag: '50万-100万',
          },
          {
            presetValue: 36,
            tag: '100万+',
          },
        ],
        actualProgressVO: [
          {
            presetValue: 13,
            tag: '<1万',
          },
          {
            presetValue: 12,
            tag: '1万-10万',
          },
          {
            presetValue: 18,
            tag: '10万-50万',
          },
          {
            presetValue: 21,
            tag: '50万-100万',
          },
          {
            presetValue: 16,
            tag: '100万+',
          },
        ],
      }

      const source = [
        ['', ...data.presetProgressVO.map((i) => i.tag)],
        ['计划', ...data.presetProgressVO.map((i) => i.presetValue)],
        ['实际', ...data.actualProgressVO.map((i) => i.presetValue)],
      ]
      
      this.option = {
        ...this.option,
        dataset: {
          source
        }
      }
    }, 5000)
  }
}
</script>
```