> For the complete documentation index, see [llms.txt](https://yicoding.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yicoding.gitbook.io/vue/cha-jian/tu-biao.md).

# 图表

## 1.Chart.js

```
// chart.vue
<template>
  <div>
    <canvas ref="myChart"></canvas>
  </div>
</template>

<script>
// 引入Chart.js图表
import Chart from 'chart.js'

export default {
  data () {
    return {
        myChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLine()
    })
  },
  methods: {
    initLine() {
      this.myChart = new Chart(this.$refs.myChart, option)
    }
  }
}
</script>
```

## 2.echarts.js

```
// echarts.vue
<template>
  <div>
    <div ref="myChart"></div>
  </div>
</template>

<script>
// 引入echarts图表
import echarts from 'echarts'

export default {
  data () {
    return {
        myChart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLine()
    })
  },
  methods: {
    initLine() {
      this.myChart = echarts.init(this.$refs.myChart)
      // 为echarts对象加载数据 
      this.myChart.setOption(option)
    }
  }
}
</script>
```