This commit is contained in:
parent
1031053ebd
commit
405b2e9d99
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -12,6 +12,7 @@ const chart = ref(); // 创建DOM引用
|
|||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||
},
|
||||
legend: {
|
||||
top: "8%",
|
||||
|
|
@ -24,7 +25,7 @@ let option = {
|
|||
grid: {
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "3%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
|
|
@ -39,17 +40,27 @@ let option = {
|
|||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "category",
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
|
|
@ -57,13 +68,39 @@ let option = {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.1)"
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 14,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
color: "#DEF1FF",
|
||||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "特困发放人次",
|
||||
name: "特困补助金额",
|
||||
type: "bar",
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||
showBackground: true,
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
@ -76,16 +113,13 @@ let option = {
|
|||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "低保发放人次",
|
||||
name: "低保补助金额",
|
||||
type: "bar",
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7],
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
|
|
@ -97,9 +131,16 @@ let option = {
|
|||
},
|
||||
]),
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0.1)",
|
||||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
|
||||
barWidth: 50,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,9 +12,19 @@ const chart = ref(); // 创建DOM引用
|
|||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||
// formatter: function (params) {
|
||||
// console.log(1111111,params);
|
||||
// let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
|
||||
// const result =circle +
|
||||
// params[0].color +
|
||||
// `"></span>` +
|
||||
// params[0].name +
|
||||
// ": " +
|
||||
// params[0].value;
|
||||
// // const result = (title ? title + '<br />' : '') + params[0].name + ': ' + params[0].value;
|
||||
// return result;
|
||||
// },
|
||||
},
|
||||
legend: {
|
||||
top: "8%",
|
||||
|
|
@ -42,9 +52,16 @@ let option = {
|
|||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "category",
|
||||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
|
|
@ -62,15 +79,38 @@ let option = {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.1)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 14,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
color: "#DEF1FF",
|
||||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name: "职工养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6],
|
||||
barWidth: "25%",
|
||||
showBackground: true,
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
@ -83,16 +123,12 @@ let option = {
|
|||
},
|
||||
]),
|
||||
},
|
||||
// backgroundStyle: {
|
||||
// color: "rgba(180, 180, 180, 0.2)",
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: "城乡养老保险发放人次",
|
||||
type: "bar",
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7],
|
||||
barWidth: "25%",
|
||||
showBackground: true,
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
|
|
@ -105,9 +141,16 @@ let option = {
|
|||
},
|
||||
]),
|
||||
},
|
||||
// backgroundStyle: {
|
||||
// color: "rgba(180, 180, 180, 0.2)",
|
||||
// },
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0.1)",
|
||||
},
|
||||
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
|
||||
barWidth: 50,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
<eP3_2 v-else></eP3_2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex">
|
||||
<div class="displayFlex center_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title center_1">
|
||||
</div>
|
||||
|
|
@ -238,7 +238,7 @@ const change = (name, index) => {
|
|||
<style lang="scss" scoped>
|
||||
.displayFlex {
|
||||
box-sizing: border-box;
|
||||
height: 90vh;
|
||||
// height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
|
@ -376,6 +376,7 @@ const change = (name, index) => {
|
|||
|
||||
.left_bg {
|
||||
width:642px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left:50px;
|
||||
margin-right:28px;
|
||||
|
|
@ -383,7 +384,16 @@ const change = (name, index) => {
|
|||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.center_bg{
|
||||
width:582px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left:10px;
|
||||
margin-right:28px;
|
||||
background-image: url(@/assets/images/center_bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.basicInformation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
Loading…
Reference in New Issue