平时在项目中实现数据可视化，可以使用百度的开源图表库echarts，根据项目需求来绘制生成各种类型的图表，那么在Vue中如何引入echarts并封装成组件调用呢？

目录：

1. 安装echarts

2. 全局引入

3. 按需引入

4. 参考文档

1. 安装echarts

因为通过vue-echarts按需引入时，一些组件模块（如折线图、柱状图，提示框和标题组件等）需要依赖已经包含所有图表和组件的Echarts包，所以这里两个都需要安装：

npm install echarts vue-echarts -S

当然，你不使用vue-echarts也可以实现按需引入，就可以不安装vue-echarts，下面会讲到。

使用

2. 全局引入

在入口文件main.js中：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

新建MyChart.vue组件，内容如下，其中option配置可在引用组件时通过props传入，在这里为了演示我直接写在组件里了：

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  name: "MyChart",
  props: {
    chartId: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "500px"
    },
    chartOptions: {
      type: Object,
      required: true
    },
  },
  mounted() {
    this.createChart()
  },
  methods: {
    createChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById(this.chartId));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "一周价格走势"
        },
        tooltip: {},
        legend: {
          data: ["价格"]
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "价格",
            data: [220, 202, 231, 243, 225, 220, 213],
            type: "line",
            smooth: true
          }
        ]
      }
      chart.setOption(option);
    }
  }
}
</script>

使用组件：

<my-chart chartId="chart" :chartOptions="{}" width="500px" height="500px"></my-chart>

npm start，即可在浏览器中看到根据配置生成折线图（series.type='line'）：我的Vue开发配置环境

使用 import echarts from 'echarts' 得到的是已经加载了所有图表和组件的 ECharts 包，因此项目打包体积会比较大，如果在项目中对体积要求比较苛刻，可以只按需引入需要的模块。

3. 按需引入

（1）按需引入方式一

此时我们不在main.js文件中引入，而是直接在MyChart.vue组件中，直接引入echarts包中的基础模版，然后再按需引入需要的组件模块，修改MyChart.vue组件，内容如下：

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>

// 引入基本模板
let Echarts = require("echarts/lib/echarts");
// 按需引入需要的组件模块
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");

export default {
  name: "MyChart",
  props: {...},
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = Echarts.init(document.getElementById(this.chartId));
      // 指定图表的配置项和数据
      var option = {...};
      chart.setOption(option);
    }
  }
}
</script>

（1）按需引入方式二

此时我们通过引入vue-echarts组件库，然后再按需引入echarts包中的组件模块：

vue-echarts是基于echarts封装实现的一个组件库，直接按照正常的组件引用方式，安装引用即可，具体的安装和引用读者可以直接阅读 vue-echarts技术文档。

在入口文件main.js中：

// 引入vue-echarts组件库
import ECharts from 'vue-echarts'
// 按需引入需要的组件模块
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
// 注册组件后即可使用
Vue.component('chart', ECharts)

然后修改MyChart.vue组件，内容如下：

<template>
  <div>
    <chart ref="chart" :options="chartOptions" :auto-resize="true"></chart>
  </div>
</template>

<script>
export default {
  name: "MyChart",
  data() {
    return {
      chartOptions: {}
    };
  },
  mounted() {
    this.getOptions()
  },
  methods: {
    getOptions() {
      this.chartOptions = {
        title: {
          text: "一周价格走势"
        },
        tooltip: {},
        legend: {
          data: ["价格"]
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "价格",
            data: [220, 202, 231, 243, 225, 220, 213],
            type: "line",
            smooth: true
          }
        ]
      }
    }
  }
}
</script>

以上是通过全局注册组件的方式使用vue-echarts组件，当然你也可以在MyChart.vue组件中import然后注册成局部组件，但这里建议使用全局注册组件方式，因为这样不管你在项目中使用多少的不同图表系列类型，只需关心在.vue组件文件中定义不同的option配置就可以了，而不用在每个组件中写重复的import引入。

4. 参考文档