简单的vue+echarts封装

1. index.vue可复用的子组件,echarts所需的data通过props传入

<template>
    <div ref="myEchart" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echarts",
  data() {
    return {};
  },
  props: {
    height: { type: String, default: "80vh" },
    width: { type: String, default: "100%" },
    options: { type: Object, default: () => {} }
  },
  computed: {
    myOptions: function() {
      return this.options || {};
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(this.$refs.myEchart);
      myChart.setOption(this.myOptions); // 绘制图表
      window.onresize = () => myChart.resize();
      //   window.addEventListener("resize", () => myChart.resize());
    }
  }
};
</script>

2.pie.vue 引用的父组件,需要异步访问的data在此页面进行,其余的echarts配置在一个配置文件pie.js声明

<template>
  <v-echarts :options="options"></v-echarts>
</template>
<script>
import vEcharts from "./index";
import echartSettings from "./pie.js";
export default {
  name: "",
  components: { vEcharts },
  data() {
    return {
      options: echartSettings
    };
  },
  methods: {
    getData() {
      new Promise(resolve => {
        let obj = [
          { value: 335, name: "直接访问" },
          { value: 310, name: "邮件营销" },
          { value: 234, name: "联盟广告" },
          { value: 135, name: "视频广告" },
          { value: 1548, name: "搜索引擎" }
        ];
        resolve(obj);
      }).then(res => {
        let arr = [];
        res.forEach(item => arr.push(item.name));
        echartSettings.legend.data = arr;
        echartSettings.series[0].data = res;
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

3. pie.js echarts配置,放在和pie.vue的同级目录下

export default {
  title: {
    text: "某站点用户访问来源",
    subtext: "纯属虚构",
    left: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: []
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
};