如何在vue封装echerts组件

在vue项目中我们经常需要用到图标，统计图一类的东西。echerts则为我们很好的提供了我们所需的数据统计图标。通过封装echerts组件，则会让你在vue项目中减少很多代码。下面我们将进行封装一个简单的柱状图组件。

1、在vue项目中安装echerts。

npm install echarts --save

2、在main.js中引入配置。

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

3、新建页面，创建组件。

<template>
  <div>
    <span id="myChart" style="width: 350px;height: 350px;"></span>
  </div>
</template>
<script>
export default {
  name: "eCharts",
  data() {
    return {};
  },
  props: {
    text: "",
    xData: [],
    yData: []
  },
  //用来监控参数的变化
  watch: {
    text(val) {
      this.drawLine();
    },
     xData(val) {
      this.drawLine();
    },
     yData(val) {
      this.drawLine();
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      let option = {
        title: { text: "组件echarts" },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: []
          }
        ]
      };
      option.title.text = this.text;
      option.xAxis.data = this.xData;
      option.series[0].data = this.yData;
      myChart.setOption(option);
    }
  }
};
</script>

4、在需要的页面引入组件，传入需要的值。

页面显示

<echerts style="margin-left: 500px;" :text='text' :xData='xData' :yData='yData'>  

引入组件

import echerts from './Chart';
components: { echerts }

传入参数

 text:"销售柱状图",
 xData: ["狗","猪","马","羊","牛","驴"],
 yData: [5, 20, 36, 10, 10, 70]

5、效果图

至此，一个简单的echerts的柱状图组件就完成的，以后只需要的需要的页面引入并且传参即可。其他的统计图标同理。