如何在vue项目中使用 Echarts？

最新推荐文章于 2024-07-04 17:27:49 发布

原创最新推荐文章于 2024-07-04 17:27:49 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Echarts #饼状图

Vue 专栏收录该内容

59 篇文章

订阅专栏

本文展示了如何利用ECharts库在Vue.js应用中创建一个饼状图，用于显示健康监测数据，包括正常和异常人员的数量。通过获取API数据并初始化ECharts实例，实现了动态更新图表的功能。

先看效果：

多余的话不多说直接上代码：（当然如果你有更好的方法，欢迎私信留言）

<template>
  <div class="Heart_rate">
    <!-- 饼状图 -->
      <div class="piechartLeft">
        <div id="chart_example" ref="chart_example"></div>
      </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: ["option"],
  data() {
    return {
      
      normalPerple: 0,
      normal: "",
      Abnormal: "",
      heartData: [], //饼状图绑定的数据
      normalHeartData: [], 
      noHeartData: [], 
     
    };
  },
  created() {
    this.getNormalNum();
    this.getAbnormalNum();
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  methods: {
    
    // 获取正常人员数量
    getNormalNum() {
      this.normalPerple = 1;
      this.$http
        .get(`/api/heartRateStatus/num/${this.normalPerple}`)
        .then((res) => {
          if (res.data.status === 200) {
            console.log(res.data.data);
            this.normal = res.data.data;
            this.heartData.push({ value: this.normal, name: "正常" });
            this.drawLine()
            
          }
        });
    },
    // 获取异常人员数量
    getAbnormalNum() {
      this.normalPerple = 2;
      this.$http
        .get(`/api/heartRateStatus/num/${this.normalPerple}`)
        .then((res) => {
          if (res.data.status === 200) {
            console.log(res.data.data);
            this.Abnormal = res.data.data;
            this.heartData.push({ value: this.Abnormal, name: "异常" });
            this.drawLine()
          }
        });
    },
    // 饼状图
    drawLine() {
      // var _this = this
      console.log(this.heartData);
    // let echarts = require('echarts'); 备用
    // let myChart = echarts.init(chart_example); 备用
      let myChart = this.$echarts.init(chart_example);
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#71d398", "#f68484"],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.heartData, //绑定的数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>

</style>