vue内echarts用自己的数据

当你使用 Vue 和 ECharts 时，可以按照以下步骤使用自己的数据：

1. 引入 ECharts 库

在 Vue 中使用 ECharts，需要先引入 ECharts 库。你可以通过以下方式在 Vue 中引入 ECharts：

import echarts from 'echarts';

2. 创建 ECharts 实例

接下来，你需要创建一个 ECharts 实例。你可以在 Vue 组件的 mounted 钩子函数中创建 ECharts 实例。例如：

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

3. 准备数据

在创建 ECharts 实例之后，你需要准备数据。在 Vue 中，你可以将数据保存在组件的 data 中。例如：

data() {
  return {
    chartData: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
  }
}

这里的 chartData 就是保存数据的对象。

4. 配置 ECharts

接下来，你需要配置 ECharts 实例。在 Vue 中，你可以使用 computed 属性来配置 ECharts。例如：

computed: {
  chartOption() {
    return {
      xAxis: this.chartData.xAxis,
      yAxis: this.chartData.yAxis,
      series: this.chartData.series
    }
  }
}

这里的 chartOption 就是 ECharts 配置选项的对象。它会根据 chartData 对象动态生成。

5. 渲染 ECharts

最后，你需要在模板中渲染 ECharts。例如：

<template>
  <div id="myChart" style="width: 600px;height:400px;"></div>
</template>

这里的 myChart 就是 ECharts 实例的容器。

综上所述，你可以按照以上步骤在 Vue 中使用自己的数据来渲染 ECharts。