vue中echarts初始化实例

在Vue中初始化一个ECharts实例的步骤如下：

1. 安装echarts：可以使用npm或yarn安装echarts。

npm install echarts --save-dev

或

yarn add echarts --dev

2. 在Vue组件中引入echarts。

import echarts from 'echarts'

3. 在Vue组件的mounted()函数中初始化echarts实例。

mounted() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('chart'))

  // 绘制图表
  myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  })
}

在上面的代码中，我们使用document.getElementById('chart')获取了一个DOM元素，然后使用echarts.init()方法初始化了一个echarts实例，并将其挂载到DOM元素中。

接下来，我们使用setOption()方法为echarts实例设置图表的配置项和数据。

注意：在销毁组件时，我们需要调用echarts实例的dispose()方法来释放资源。

beforeDestroy() {
  // 销毁echarts实例
  if (this.myChart) {
    this.myChart.dispose()
    this.myChart = null
  }
}