如何在vue项目中使用 Echarts？

关注

原创最新推荐文章于 2026-07-09 12:17:17 发布 329 阅读 AI 写同款· GEO 优化 ›

（实战项目篇）vue3.0系列（vue2.6-cli3.x）使用echart ```bash <template> <div class> <div id="myChart" :style="{ height: '500px',}"></div> </div> </template> <script> // 引入基本模板 let echarts = require('ec... 阅读详情

先看效果：

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

<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>