常用echarts封装

这里主要对一些基础的echarts进行封装

echarts官网：echarts.apache.org/handbook/zh…

因为不管我们是需要饼图、南丁格尔图还是折线图等，都需要通过类似于以下的代码对其进行初始化操作，要是每次都去重复的写一遍，也有点过于繁琐了：

const echartsInstance = echarts.init(this.$refs.echartRef, "light", {
      renderer: "canvas",
    });
    echartsInstance.setOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });

因此这里就对其进行封装，以达到更加方便的去操作和使用 echarts

这里主要通过传入配置的形式进行优化处理：三层封装

封装如下： components/echarts/src/baseEcharts.vue

<template>
  <div class="base-echart">
    <div class="echart" ref="echartRef"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    option: Object,
  },
  data() {
    return {};
  },
  mounted() {
    const echartsInstance = echarts.init(this.$refs.echartRef, "light", {
      renderer: "canvas",
    });
    echartsInstance.setOption(this.option);
  },
};
</script>

<style lang="scss" scoped>
.echart {
  height: 300px;
}
</style>

components/echarts/src/lineEcharts.vue

<template>
  <div class="line-echart">
    <baseEcharts :option="option" />
  </div>
</template>

<script>
import baseEcharts from "./baseEcharts.vue";

export default {
  components: {
    baseEcharts,
  },
  data() {
    return {
      option: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      },
    };
  },
};
</script>

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

components/echarts/src/pieEcharts

<template>
  <div class="pie-echart">
    <baseEcharts :option="option" />
  </div>
</template>

<script>
import baseEcharts from "./baseEcharts.vue";

export default {
  components: {
    baseEcharts,
  },
  data() {
    return {
      option: {
        title: {
          // text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
};
</script>

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

components/echarts/index.js

import baseEcharts from "./src/baseEcharts.vue";
import lineEcharts from "./src/lineEcharts.vue";
import pieEcharts from "./src/pieEcharts.vue";

export { lineEcharts, pieEcharts };

export default baseEcharts;

views/home.vue

<template>
  <div class="echarts-box">
    <div class="echarts-item">
      <lineEcharts></lineEcharts>
    </div>
    <div class="echarts-item">
      <pieEcharts></pieEcharts>
    </div>
  </div>
</template>

<script>
import {
  lineEcharts,
  pieEcharts,
} from "@/components/echarts";

export default {
  components: {
    lineEcharts,
    pieEcharts,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.echarts-box {
  width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}

.echarts-item {
  width: 500px;
}

.rose-echarts-item {
  width: 650px;
}
</style>

效果图：