vue2安装Ecahrts

要在Vue2中安装Echarts，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Vue2和Echarts的依赖。你可以使用npm或者yarn来安装它们。在你的项目根目录下运行以下命令来安装Vue2和Echarts：

npm install vue echarts --save

或者

yarn add vue echarts

2. 在你的Vue组件中，引入Echarts和相关的样式文件。你可以在组件的`<script>`标签中添加以下代码：

import echarts from 'echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

3. 在你的Vue组件中，创建一个容器来放置Echarts图表。你可以在组件的`<template>`标签中添加以下代码：

<div id="main" style="height: 290px; width: 550px;"></div>

确保给容器设置一个唯一的id，这里使用了`main`作为示例。

4. 在你的Vue组件的`methods`中，创建一个函数来初始化Echarts图表。你可以在组件的`<script>`标签中添加以下代码：

methods: {
  initCharts() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '月销量'
      },
      tooltip: {}, // 提示框
      legend: {
        data: \['销量'\]
      },
      xAxis: {
        data: \['oppo', 'vivo', 'iphone', '小米', '三星', '魅族'\]
      },
      yAxis: {},
      series: \[{
        name: '销量',
        type: 'bar',
        data: \[3500, 2200, 4500, 6500, 200, 3000\]
      }\]
    };

    myChart.setOption(option);
  }
}

5. 在你的Vue组件的生命周期钩子函数中调用`initCharts`函数来初始化图表。你可以在组件的`<script>`标签中添加以下代码：

mounted() {
  this.initCharts();
}

这样，你就成功地在Vue2中安装并使用了Echarts。记得在你的Vue组件中引入Echarts和相关的样式文件，并在合适的位置创建容器和初始化图表。
#### 引用[.reference_title]
- *1* [vue2 安装 echarts-gl 报错](https://blog.csdn.net/qq_42566295/article/details/127086300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue2.0安装Echarts](https://blog.csdn.net/m0_59511468/article/details/124886566)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]