【vue】 在vue2项目中使用echarts

在Vue 2项目中使用ECharts，你需要按照以下步骤操作：

1. 安装ECharts：

npm install echarts --save

2. 在Vue组件中引入ECharts：

import * as echarts from 'echarts';

3. 在组件的模板部分，添加一个用于渲染图表的DOM元素：

<template>
  <div ref="echartsDom" style="width: 600px; height: 400px;"></div>
</template>

4. 在组件的mounted生命周期钩子中初始化ECharts实例，并创建图表：

export default {
  name: 'EChartsComponent',
  mounted() {
    const myChart = echarts.init(this.$refs.echartsDom);
    const option = {
      // ECharts 配置项
      title: {
        text: 'ECharts 示例'
      },
      tooltip: {},
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    myChart.setOption(option);
  }
}

确保你的Vue组件的style或外部CSS为ECharts元素提供了合适的宽度和高度，否则图表可能不会显示。