Echarts组件的简单封装

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

核心部分 ：坐标轴(x,y轴)和series(图表内容)

安装： npm install echarts --save

代码：

<template>
  <!-- 首先准备一个容器 -->
  <div style="height: 100%" ref="echart">echart</div>
</template>

<script>
import echarts from "echarts";// 引入echarts
export default {
  name: "Echarts",
  props: {// 父组件传来的数据
    chartData: {
      type: Object,//类型:对象
      default() {//默认值
        // 为啥通过return的方式返回
        // 这个组件如果使用default等于一个对象的话，其他组件复用的时候，都是这个对象的引用，并且其他组件如果修改的恶化，其他组件也会收到影响，所以通过一个函数来返回一个对象
        return {
          xData: [],
          series: [],
        };
      },
      isAxisChart: {//是否有坐标轴的数据
        type: Boolean,
        default: true,
      },
    },
  },
  computed: {
    options() {
      // 通过isAxisChart来选择配置
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
  data() {
    return {
      echart: null, //初始化的echart对象
      axisOptio: {//有坐标轴配置
        xAxis: {
          //x轴数据
          type: "category",
          data: [],
          // axisLine: {
          //     lineStyle: {
          //     color: '#17b3a3'
          //     }
          // },
          axisLabel: {
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        series: [],
      },
      normalOption: {//无坐标轴配置
        series: [],
      }, 
    };
  },

  mounted() {},

  methods: {
    // 初始化图标  基本参数
    initChart() {
      this.initChartData();
      if (this.echart) { //如果容器存在
        this.echart.setOption(this.options); //直接传递配置(this.options对应计算属性里面的)
      } else {
        this.echart = echarts.init(this.$refs.echart); //先初始化对象
        this.echart.setOption(this.options); //传递配置
      }
    },
    // 处理传递的信息
    initChartData() {
      if (this.isAxisChart) { //存在坐标轴
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    },
    resizeChart() {
      this.echart ? this.echart.resize() : "";
    },
  },
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

从实际角度出发，先判断那些需要动态传入的参数，把它定义出来，用计算属性来区分有无坐标轴，因为option随着传入的数据改变的，之后定义initChart()——初始化图标和initChartData()——处理传递的信息这两个方法。