Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
06f63028 by xiaomiao
Options

样式调整

1 parent c3afa824
Inline Side-by-side
Showing 6 changed files with 285 additions and 276 deletions
<template>
<!--上报统计柱状图 -->
<!--上报统计柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="100%"
width="100%"
></Echart>
width="100%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "5%",
right: "8%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "value",
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#01F3F5",
fontSize: 12,
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
},
yAxis: {
type: "category",
data: newData.category,
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
grid: {
left: "5%",
right: "8%",
bottom: "5%",
containLabel: true,
},
},
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
xAxis: {
type: "value",
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
lineStyle: {
color: "#01F3F5",
},
},
itemStyle: {
normal: {
color: "#5fba7d",
axisLabel: {
show: true,
textStyle: {
color: "#01F3F5",
fontSize: 12,
},
},
data: newData.barData,
},
{
name: "失败",
type: "bar",
stack: "总量",
label: {
yAxis: {
type: "category",
data: newData.category,
axisLine: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
lineStyle: {
color: "#01F3F5",
},
},
},
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
color: "#5fba7d",
},
},
data: newData.barData,
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#c97168",
{
name: "失败",
type: "bar",
stack: "总量",
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#c97168",
},
},
data: newData.lineData,
},
data: newData.lineData,
},
],
};
],
};
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
......
<template>
<!--登记类型总量柱状图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class=""></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "20%",
left: "10%",
right: "5%",
bottom: "16%",
},
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "20%",
left: "12%",
right: "5%",
bottom: "16%",
},
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
textStyle: {
fontWeight: "normal",
fontSize: "8",
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
}
},
yAxis: {
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
}
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
},
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
yAxis: {
splitLine: {
show: false,
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
{
barWidth: 15,
animation: false,
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
{
barWidth: 15,
animation: false,
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
},
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
},
data: newData.lineData,
},
data: newData.lineData,
},
],
}
],
}
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
......
......@@ -4,75 +4,77 @@
id="centreLeft1Chart"
:key="key"
height="1.0417rem"
width="80%"
></Echart>
width="80%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
components: {
Echart,
},
data() {
return {
key: 0,
};
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
components: {
Echart,
},
},
watch: {
cdata: {
handler(newData) {
data () {
return {
key: 0,
};
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
],
series: [
{
name: "Access From",
type: "pie",
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `${params.name}(${params.value}`;
],
series: [
{
name: "Access From",
type: "pie",
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `${params.name}\n（${params.value}）`;
},
position: "outer",
alignTo: "edge",
margin: 5
},
},
labelLine: {
lineStyle: {
width: 3,
labelLine: {
lineStyle: {
width: 3,
},
},
},
data: newData.seriesData,
}
],
};
this.key++;
data: newData.seriesData,
}
],
};
this.key++;
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
<style lang="scss" scoped>
#centreLeft1Chart {
margin-bottom: 0.0521rem;
margin-left: .3125rem;
}
#centreLeft1Chart {
margin-bottom: 0.0521rem;
margin-left: 0.3125rem;
}
</style>
......
......@@ -408,4 +408,11 @@ aside {
top: 2px;
background: #FF7962;
color: #FF7962;
}
\ No newline at end of file
}
// 引入字体
@font-face {
font-family:AliBold;
src:url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
}
......
<template>
<div class="rightcard">
<div class="card2 cardCon mt-10">
<div class="cardhead">登记业务量</div>
<Rose />
</div>
<div class="card1 cardCon d-center">
<div class="cardhead">新建国有房屋信息</div>
<div class="cardcontent" style="margin-top: .3646rem">
<dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
<div v-else="config.data.length==0" class="nodata">暂无数据</div>
<div v-else class="nodata">暂无数据</div>
</div>
</div>
<div class="card2 cardCon mt-10">
<div class="cardhead">登记业务量</div>
<Rose />
</div>
<div class="card3 cardCon mt-10">
<div class="cardhead">登记类型总量</div>
<columnarsmat />
......