loveflow
11 months ago
|
After Width: | Height: | Size: 777 B |
|
After Width: | Height: | Size: 559 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 977 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
@ -0,0 +1,18 @@
|
||||
export const commonMixins = {
|
||||
data() {
|
||||
return {
|
||||
zhAreaList: [
|
||||
{ name: "招宝山街道", value: "330211001" },
|
||||
{ name: "九龙湖镇", value: "330211101" },
|
||||
{ name: "澥浦镇", value: "330211100" },
|
||||
{ name: "骆驼街道", value: "330211003" },
|
||||
{ name: "庄市街道", value: "330211004" },
|
||||
{ name: "蛟川街道", value: "330211002" },
|
||||
{ name: "贵驷街道", value: "330211005" },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="enterpriseTeamWorkScreenMainWrap loveflow">
|
||||
<div class="riskTrim tlIcon"></div>
|
||||
<div class="riskTrim trIcon"></div>
|
||||
<div class="enterpriseTeamWorkScreenMainBody">
|
||||
<div class="enterpriseTeamWorkScreenMainTop">{{ title }}</div>
|
||||
<div class="enterpriseTeamWorkScreenMainBtm">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backIcon: require("@/assets/images/topic/left.png"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$emit("gotoPage");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/loveflow/assets/index.scss";
|
||||
.enterpriseTeamWorkScreenMainWrap {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/team/screenb.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.enterpriseTeamWorkScreenMainBody {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: url("~@/assets/images/team/screenw.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.enterpriseTeamWorkScreenMainTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: vw(830);
|
||||
height: vw(70);
|
||||
background: url("~@/assets/images/team/screent.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
.enterpriseTeamWorkScreenMainBtm {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<g-chart :echartdata="option"></g-chart>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
chartObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setOption();
|
||||
},
|
||||
methods: {
|
||||
setOption() {
|
||||
let dataList = this.chartObj.data;
|
||||
let maxArr = [];
|
||||
let maxValue = 0;
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
let total = 0;
|
||||
|
||||
dataList.forEach((item) => {
|
||||
xData.push(item.name);
|
||||
yData.push(item.value);
|
||||
if (maxValue < item.value) {
|
||||
maxValue = item.value;
|
||||
}
|
||||
});
|
||||
dataList.forEach((item) => {
|
||||
maxArr.push(maxValue);
|
||||
total = total + item.value;
|
||||
});
|
||||
if (!total) {
|
||||
total = 1;
|
||||
}
|
||||
|
||||
this.option = {
|
||||
grid: {
|
||||
left: "14",
|
||||
top: "5%", // 设置条形图的边距
|
||||
right: "0",
|
||||
bottom: "0",
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
data: xData,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
verticalAlign: "bottom",
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
fontFamily: "Microsoft YaHei",
|
||||
align: "left",
|
||||
rich: {
|
||||
index: {
|
||||
padding: [6, 0, 6, 8],
|
||||
},
|
||||
name: {
|
||||
padding: [4, 8, 6, 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name, index) => {
|
||||
const _index = index + 1;
|
||||
if (dataList.length) {
|
||||
const item = dataList.filter((item) => item.name == name)[0];
|
||||
let text = `{index|${_index}.} {name|${name}}`;
|
||||
return text;
|
||||
}
|
||||
},
|
||||
},
|
||||
offset: 0,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// 内
|
||||
type: "bar",
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
console.log(params);
|
||||
let color = {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#2ccb7a", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#1aafc5", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#11a2e6", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
};
|
||||
return color;
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: dataList,
|
||||
z: 2,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
// 外边框
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barWidth: 1,
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
normal: {
|
||||
color: "none",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
padding: [-20, 10, 0, -20],
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
rich: {
|
||||
value: {
|
||||
color: "#9CE0FF",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (params) => {
|
||||
var text = `{value|${params.data}}`;
|
||||
return text;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: "#9CE0FF",
|
||||
fontSize: 14,
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
position: "right",
|
||||
distance: 1, // 向右偏移位置
|
||||
show: true,
|
||||
},
|
||||
data: yData,
|
||||
z: 0,
|
||||
animationEasing: "elasticOut",
|
||||
},
|
||||
{
|
||||
name: "外框",
|
||||
type: "pictorialBar",
|
||||
symbol: "rect",
|
||||
symbolBoundingData: maxValue,
|
||||
barGap: "-100%", // 设置外框粗细
|
||||
data: maxArr,
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0.06)", // 填充色
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
z: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartObj: {
|
||||
handler(newval) {
|
||||
this.setOption();
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||