echarts 结合vue

ECharts 是一个基于 JavaScript 的开源可视化库，可以用于构建各种类型的图表，包括折线图、柱状图、散点图、饼图等等。而 Vue 是一个流行的 JavaScript 框架，它提供了数据绑定、组件化等功能，可以方便地构建交互式的 Web 应用程序。下面是结合 Vue 使用 ECharts 的基本步骤：

1. 安装 ECharts

可以通过 npm 或者直接下载 ECharts 的源代码来安装 ECharts。

2. 引入 ECharts

在 Vue 组件中，可以通过 import 语句来引入 ECharts：

import echarts from 'echarts'

3. 创建 ECharts 实例

在 Vue 组件的 mounted 钩子函数中，可以创建一个 ECharts 实例：

mounted() {
  this.chart = echarts.init(this.$refs.chart)
}

其中，this.$refs.chart 是一个指向组件中的 DOM 元素的引用。

4. 配置 ECharts 实例

可以使用 ECharts 的 API 来配置 ECharts 实例，例如设置图表的标题、x 轴和 y 轴的标签等等。

this.chart.setOption({
  title: {
    text: '折线图'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line'
  }]
})

5. 销毁 ECharts 实例

在 Vue 组件的 beforeDestroy 钩子函数中，可以销毁 ECharts 实例：

beforeDestroy() {
  this.chart.dispose()
}

上面是一个简单的使用 ECharts 的例子，实际上 ECharts 还提供了很多高级的功能和 API，可以根据需要进行使用。