Vue中使用Echarts

第一步：安装echarts模块

cnpm install echarts -S

---

第二步：在 main.js中全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts // 全局引入 后面用this.$echarts就能直接使用了

---

使用方式：

template中

<template>
    <el-card class="box-card" style="flex: 1; margin: 10px 0">
      <div slot="header" class="clearfix">
        <span>出库状态占比</span>
      </div>
      <div style="height: 300px; width: 100%" id="orderStatus"></div>
    </el-card>
</template>

scripts中

mounted() {  
    this.order_UnSend = res.data.data.order_unSend
    this.order_Sended = res.data.data.order_sended
    this.order_Received = res.data.data.order_received
    this.order_BackOri = res.data.data.order_backOri
    this.order_BackStore = res.data.data.order_backStore
    // 注意：需要先赋值，再渲染数据
    this.renderOrderStatus();
}

methods: {
    //订单状态饼图渲染
    renderOrderStatus() {
      let myStatusOptions = this.$echarts
          .init(
              // 获取id
              document.getElementById("orderStatus")
          );
      let orderStatusOptions = {
        title: {
          text: "订单状态分布",
          left: "center",
          top: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            color: ["#409EFF", "#409EFF", "#67C23A", "#E6A23C", "#F56C6C"],
            data: [
              {
                value: this.order_BackOri,
                name: "退回原厂",
              },
              {
                value: this.order_BackStore,
                name: "退回仓库",
              },
              {
                value: this.order_Received,
                name: "已收货",
              },
              {
                value: this.order_Sended,
                name: "已发货",
              },
              {
                value: this.order_UnSend,
                name: "未发货",
              },
            ],
            radius: ["40%", "70%"],
          },
        ],
      };
      myStatusOptions.setOption(orderStatusOptions);
    }
}