1.球状
<template>
<div class="gw-echart">
<div class="echart-main">
<div class="eachert-box">
<div class="eachart-zz" id="eachart-zz"></div>
<div class="eachert-title">
<div>预备</div>
<div>{{ zzkqObj.zz }}</div>
</div>
</div>
<div class="eachert-box">
<div class="eachart-kq" id="eachart-kq"></div>
<div class="eachert-title">
<div>正式</div>
<div>{{ zzkqObj.kq }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getybdyNum } from "@/api/module/lqdjScreen";
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
name: "gwEchart",
data() {
return {
zzkqObj: {},
};
},
props: {
unid: String,
},
mounted() {
this.getDate();
},
methods: {
toCommunityBig(){
this.$router.push({
path: "/djBigScreen/communityBig",
query: {
communityName: '',
isFull:this.isFull
},
});
},
getDate() {
getybdyNum({
ftype: 0,
unid: this.unid,
})
.then((res) => {
console.log(res);
if (res.code == "200") {
let tampArr = res.result;
this.zzkqObj = {
zz: 0,
kq: 0,
};
tampArr.forEach((item) => {
if (item.title == "正式党员") {
this.zzkqObj.zz = item.value.number;
} else if (item.title == "空缺岗位") {
this.zzkqObj.kq = item.value.number;
}
});
let tampObj = {};
let sum = this.zzkqObj.zz + this.zzkqObj.kq;
tampObj.zz = Math.ceil((this.zzkqObj.zz / sum) * 100) / 100;
tampObj.kq = 1 - tampObj.zz;
this.init(tampObj);
}
})
.catch((e) => {
console.log(e);
});
},
init(data) {
let chartDom = echarts.init(document.getElementById("eachart-zz"));
const option = {
series: [
{
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "#e02500", //下
},
{
offset: 0,
color: "#faa200",
},
],
globalCoord: false,
},
], 波浪颜色
type: "liquidFill",
radius:"40%",
data: [data.zz, data.zz],
backgroundStyle: {
borderWidth: 0, //内边框宽度
borderColor: "#b44b48 ", //背景内边框
color: "#b64e45", //背景颜色
},
outline: {
borderDistance: 2, //边框距离
itemStyle: {
borderWidth: 3,
borderColor: "#f77900",
},
},
label: {
normal: {
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
},
},
},
},
],
};
chartDom.setOption(option);
let chartDom2 = echarts.init(document.getElementById("eachart-kq"));
const option2 = {
series: [
{
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "#eeb30d", //下
},
{
offset: 0,
color: "#fee28f",
},
],
globalCoord: false,
},
], 波浪颜色
type: "liquidFill",
radius:"40%",
center: ["50%", "50%"],
data: [data.kq, data.kq],
backgroundStyle: {
borderWidth: 0, //内边框宽度
borderColor: "#f3aa37 ", //背景内边框
color: "#b54d44", //背景颜色
},
outline: {
borderDistance: 2, //边框距离
itemStyle: {
borderWidth: 3,
borderColor: "#f3aa37",
},
},
label: {
normal: {
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
},
},
},
},
],
};
chartDom2.setOption(option2);
window.addEventListener("resize", () => {
chartDom2.resize();
chartDom.resize();
});
},
},
};
</script>
<style lang="less" scoped>
.gw-echart {
width: 100%;
height: 100%;
position: relative;
.echart-main {
position: absolute;
width: 100%;
height: 110%;
left: 0;
top: -10%;
display: flex;
align-items: center;
justify-content: center;
}
.eachart-zz {
width: 100%;
height: 100%;
}
.eachart-kq {
width: 100%;
height: 100%;
}
.eachert-box {
position: relative;
height: 100%;
width: 100%;
}
.eachert-title {
position: absolute;
width: 100%;
left: 50%;
transform: translateX(-50%);
top: 75%;
font-size: 18px;
font-weight: 700;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
background: -webkit-linear-gradient(90deg, #ffc6b4 0%, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
}
</style>
2.筒状3D
<template>
<div class="edgw-echart">
<div class="eachert-box" id="edgw-echart"></div>
<div class="pedestal"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { getPie3D } from "../js/chart";
import { getFzdyStatus } from "@/api/module/lqdjScreen";
import "echarts-gl";
export default {
name: "gwEchart",
data() {
return {
myChart: null,
option: null,
colorList: [
"#867CFF",
"#0D00BB",
"#F77900",
"#BEE5FB",
"#564AF1",
"#2B8EF3",
"#48E5E5",
"#0066FF",
],
optionData: [],
};
},
props: {
unid: String,
},
mounted() {
this.getData();
},
methods: {
getData() {
getFzdyStatus(this.unid).then((res) => {
if (res.code == 200) {
let tampArr = res.result || [];
this.optionData = [];
tampArr.forEach((item, index) => {
this.optionData.push({
name: item.title,
value: item.value.number,
itemStyle: {
opacity: 1,
color: this.colorList[index],
},
});
});
this.init();
}
});
},
init() {
// 图表初始化
this.myChart = echarts.init(document.getElementById("edgw-echart"));
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
this.option = getPie3D(this.optionData, 0.8, 220, 22, 13);
console.log(this.option);
this.myChart.setOption(this.option);
// 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
// this.option.series.push({
// name: "电梯状态", //自己根据场景修改
// backgroundColor: "transparent",
// type: "pie",
// label: {
// opacity: 1,
// fontSize: 13,
// lineHeight: 20,
// },
// startAngle: -40, // 起始角度,支持范围[0, 360]。
// clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
// radius: ["20%", "50%"],
// center: ["50%", "50%"],
// data: this.optionData,
// itemStyle: {
// opacity: 0, //这里必须是0,不然2d的图会覆盖在表面
// },
// });
this.myChart.setOption(this.option);
window.addEventListener("resize", () => {
this.myChart.resize();
});
// this.bindListen(this.statusChart)
},
},
};
</script>
<style lang="less" scoped>
.edgw-echart {
width:calc(100% - 10px);
height:calc(100% - 20px);
padding:10px 5px;
position: relative;
.eachert-box {
width: 100%;
height: 100%;
z-index: 2;
position: relative;
}
.pedestal {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 8%;
// background: url("~@/assets/project/dj/pedestal.png") center center;
background-size: 100% 100%;
width: 341px;
height: 147px;
}
}
</style>