vue2 中如何使用echarts

在 Vue2 中使用 Echarts，需要先安装 Echarts，可以通过 npm 安装：

npm install echarts --save

安装完成后，在 Vue 组件中引入 Echarts 和需要使用的主题（可选），然后在 mounted 钩子函数中初始化 Echarts 实例，并通过 options 对象配置图表样式和数据，最后调用 Echarts 的 setOption 方法渲染图表。

示例代码如下：

<template>
  <div id="chart" style="height: 400px;"></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // 引入主题

export default {
  mounted() {
    // 初始化 Echarts 实例
    const chart = echarts.init(document.getElementById('chart'), 'macarons')

    // 配置 options 对象
    const options = {
      title: {
        text: 'Echarts 示例'
      },
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 5]
      }]
    }

    // 渲染图表
    chart.setOption(options)
  }
}
</script>