Vue中引入Echarts封装组件的两种方式(全局引入和按需引入)__Vue.js
发布于 3 年前 作者 banyungong 1771 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

平时在项目中实现数据可视化,可以使用百度的开源图表库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. 参考文档

回到顶部