vue3+js中使用echarts

在 Vue 3 中使用 ECharts，你需要先安装 ECharts 和其 Vue 组件库，如 `vue-echarts` 或者 `vue2-echarts-wrapper`。以下是基本步骤：

1. **安装依赖**:
- 安装 ECharts：运行 `npm install echarts`
- 如果需要 Vue 组件化版本，安装对应封装的库，例如：

     npm install @vue-echarts/core @vue-echarts/charts

2. **创建组件**:
- 创建一个新的 Vue 组件，并在模板部分导入并使用 ECharts:

     <template>
       <div ref="chartContainer" style="height: 400px;"></div>
     </template>

     <script>
       import { ECharts } from '@vue-echarts/core'
       export default {
         components: {
           ECharts,
         },
         data() {
           return {
             chartInstance: null,
           }
         },
         mounted() {
           this.initChart()
         },
         methods: {
           initChart() {
             const myChart = this.$refs.chartContainer
             this.chartInstance = new ECharts({
               container: myChart,
               ... // 这里配置图表选项
             })
             // 添加数据和图表配置...
           },
         },
       }
     </script>

3. **配置图表**:
配置图表的基本信息、图例、系列等，可以参考 ECharts 的官方文档：https://echarts.apache.org/en/

4. **更新数据和操作图表**:
当数据变化时，可以通过 `chartInstance.setOption()` 方法更新图表。