vue中编写一个饼状图

先来看成图吧！

 

1. 安装依赖 

npm install --save echarts

2.在需要用到饼状图的JS中填写引用

import echarts from 'echarts'

3.主要代码

<template>
  <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinion: ["未登录人员", "已登录人员"],
      opinionData: [
        //渲染登录与未登录人员数量
        { value: 123, name: "未登录人员" },
        { value: 34, name: "已登录人员" },
      ],
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.opinion,
        },
        series: [
          {
            name: "登录情况",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "blod",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.opinionData,
          },
        ],
      });
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawPie("main");
    });
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>