第一步:安装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);
}
}