vue2 使用echarts

1. 安装 echarts

可以通过 npm 安装 echarts：

npm install echarts --save

或者通过 CDN 引入 echarts：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 在 Vue 组件中使用 echarts

在 Vue 组件中，我们可以使用 echarts 的官方 Vue 插件 vue-echarts。

安装 vue-echarts：

npm install vue-echarts --save

安装后，在 Vue 组件中引入 vue-echarts：

import VueECharts from 'vue-echarts'

然后在组件的 template 中使用 VueECharts 组件：

<template>
  <div>
    <vue-echarts :options="chartData" :auto-resize="true"></vue-echarts>
  </div>
</template>

其中，`:options` 属性是一个对象，用于配置 echarts 图表的数据和样式。

data() {
  return {
    chartData: {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
  }
}

这是一个简单的柱状图，其中 `title` 属性设置图表标题，`xAxis` 和 `yAxis` 属性分别设置 x 轴和 y 轴的数据，`series` 属性设置图表的数据系列。更多属性和配置可以参考 echarts 官方文档。

3. 在 Vue 单文件组件中使用 echarts

我们也可以在 Vue 单文件组件中使用 echarts。在组件中引入 echarts：

import echarts from 'echarts'

然后在组件的 mounted 钩子中使用 echarts：

mounted() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('myChart'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  })
}

这里我们使用 `echarts.init` 方法初始化一个 echarts 实例，并传入一个 DOM 元素作为容器，然后使用 `setOption` 方法设置图表的数据和样式。

4. 总结

以上是在 Vue2 中使用 echarts 的方法。可以根据实际需求选择 vue-echarts 插件或直接使用 echarts 库。在使用时需要注意 echarts 的版本和 Vue 的版本兼容性。