Vue——封装echarts

components/echarts

<template>
  <div :id="id" :style="width:100%;height:400px;"></div>
</template>
<script>
export default {
  props: ["id", "option"],
  data() {
    return {
      myChart: {}
    };
  },
  created() {
    this.$nextTick(() => {
      this.loadEchart();
    });
  },
  mounted() {
    let _this = this;
    //实现echarts图表自适应
    window.onresize = function() {
      _this.myChart.resize();
    };
  },
  methods: {
    loadEchart() {
      this.myChart = echarts.init(document.getElementById(this.id));
      this.myChart.setOption(this.option);
    }
  }
};
</script>

在组件中进行调用

<template>
    <Echarts
      :chartWidth="chartWidth"
      :option="option"
      :id="id"
      :key="Date.now()"
    ></Echarts>
</template>
<script>
import Echarts from "@/components/echarts";
export default {
  components: { Echarts },
  data() {
    return {
      id: "testChart",
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "70%",
          y: "8%",
          data: ["aaa","bbb","ccc"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "45%",
            center: ["30%", "40%"],
            data: [{name:"aaa",value:1},{name:"bbb",value:2},{name:"ccc",value:3}],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

发布了24 篇原创文章 · 获赞 6 · 访问量 632
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览