echarts 按需引入模_Vue中引入Echarts封装组件的两种方式

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')

使用 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. 参考文档

• ECharts官方文档
• vue-echarts技术文档

以上 是 对 Echhar ts在Vue中使用的简单 介绍，想 了解 学习更多 关于 Echarts 内容 可持续关注 文章更新 。

怎么样？你学会了吗？

小郭

在学习过程中有任何问题都可以在下方留言或私信我，小郭期待与你相遇

小郭

---

欢迎大家点个在看，分享至朋友圈

在你需要我的时候

...