xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-04-19 14:01:48 +08:00
parent 1520e272b6
commit ffef8d4b3a
7 changed files with 98 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/eduImg/title5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/assets/images/work/center1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

206
src/view/echarts_education/eP1.vue
View File

@ -7,7 +7,7 @@ import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = [150, 230, 224, 218, 135, 147]; // const data = [150, 230, 224, 218, 135, 147];
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"]; const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
const data2 = [ const data2 = [
"10000人", "10000人",
@ -18,10 +18,10 @@ const data2 = [
"10000人", "10000人",
]; ];
// const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值 const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
const newMaxNumber = Math.max(...newData2) * 1.05;
const option = { const option = {
// color,
// calculable: true,
grid: { grid: {
top: "6%", top: "6%",
left: "9%", left: "9%",
@ -31,13 +31,14 @@ const option = {
}, },
tooltip: { tooltip: {
show: true, //---是否显示提示框,默认为true show: true, //---是否显示提示框,默认为true
trigger: "axis", trigger: "axis",
formatter: "{b0}:{c0}", formatter: "{b0}:{c0}" + "人",
}, },
xAxis: [ xAxis: [
{ {
type: "value", type: "value",
scale: false, scale: false,
max: newMaxNumber,
axisLabel: { axisLabel: {
//坐标轴分割线 //坐标轴分割线
show: false, show: false,
@ -47,11 +48,11 @@ const option = {
}, },
axisLine: { axisLine: {
//y轴线的颜色以及宽度 //y轴线的颜色以及宽度
show: false // 取消x轴线 show: false, // 取消x轴线
}, },
splitLine: { splitLine: {
show: false,//---grid 区域中的分隔线 show: false, //---grid 区域中的分隔线
}, },
axisTick: { axisTick: {
show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
}, },
@ -97,7 +98,7 @@ const option = {
position: "right", position: "right",
axisLine: { axisLine: {
//---坐标轴 轴线 //---坐标轴 轴线
show: false // 取消轴线 show: false, // 取消轴线
}, },
axisLabel: { axisLabel: {
//---坐标轴 标签 //---坐标轴 标签
@ -114,114 +115,59 @@ const option = {
series: [ series: [
{ {
type: "bar", type: "bar",
data: data, data: newData2.map(() => Math.max(...newData2) * 1.05), // 外阴影铺满整个柱状图
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
yAxisIndex: 1,
barWidth: 30, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
color: "rgba(0, 230, 255, 0.1)", //外阴影背景
},
},
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图
barWidth: 6, //外阴影背景宽
silent: true, // 不响应事件
itemStyle: {
normal: {
// borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 50, 50, 0], //圆角边框
// color: "rgba(94, 178, 188, 0.3)", //外阴影背景
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(94, 178, 188, 0)" },
{ offset: 1, color: "rgba(94, 178, 188, 0.3)" },
]),
},
},
},
{
type: "bar",
data: newData2,
barWidth: 5, //柱宽 barWidth: 5, //柱宽
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
// itemStyle: {
// normal: {
// // borderWidth: 1,
// // borderColor: "rgba(0, 183, 255, 1)",
// // borderRadius: [0, 0, 50, 0], //圆角边框
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// { offset: 0, color: "rgba(26, 255, 217, 0)" },
// { offset: 1, color: "rgba(0, 183, 255, 1)" },
// ]),
// // color: [{new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 230, 255, 1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 255, 208,1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(255, 234, 90, 1)" },
// // ])},
// // ],
// },
// },
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
let colorList = [ var colorList = [
["rgba(0, 230, 255, 1)", "rgba(0, 230, 255, 0.2)"], new echarts.graphic.LinearGradient(0, 0, 1, 0, [
["rgba(0, 255, 208,1)", "rgba(0, 255, 208, 0.20)"], { offset: 0, color: "rgba(0, 230, 255, 0)" },
["rgba(255, 234, 90, 1)", "rgba(255, 234, 90, 0.20)"], { offset: 0.5, color: "rgba(0, 230, 255, 0.5)" },
{ offset: 1, color: "rgba(0, 230, 255, 1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 255, 208,0)" },
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
{ offset: 1, color: "rgba(0, 255, 208,1)" },
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
]),
]; ];
if (params.dataIndex == 0) { return colorList[params.dataIndex % colorList.length];
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
}, },
}, },
}, },
@ -233,42 +179,10 @@ const option = {
color: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)", backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF", shadowColor: "#00E6FF",
position: ["99%", -1], position: ["99%", -1.5],
shadowBlur: 6, shadowBlur: 6,
}, },
}, },
{
yAxisIndex: 1,
showBackground: true,
barWidth: 30, //外阴影背景宽
itemStyle: {
color: "rgba(0, 230, 255, 0)", //外阴影背景
},
// data: data.map(() => data),
data: data,
type: "bar",
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
},
], ],
}; };

49
src/view/echarts_education/edCSR.vue
View File

@ -165,33 +165,36 @@ const option = {
// }, // },
{ {
xAxisIndex: 1, xAxisIndex: 1,
showBackground: true,
itemStyle: { itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景 normal: {
color: "rgba(180, 180, 180, 0)", //外阴影背景
}
}, },
// data: data.map(() => max), // data: data.map(() => max),
data: data, data: data.map(() => Math.max(...data) * 1.02),
barWidth: 40, //外阴影背景宽 barWidth: 40, //外阴影背景宽
emphasis: { // emphasis: {
itemStyle: { // itemStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
x2: 0, // x2: 0,
y: 0, // y: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: "rgba(64, 247, 176, 0.25)", // color: "rgba(64, 247, 176, 0.25)",
}, // },
{ // {
offset: 1, // offset: 1,
color: "rgba(17, 34, 64, 0.25)", // color: "rgba(17, 34, 64, 0.25)",
}, // },
], // ],
}, // },
}, // },
}, // },
type: "bar", type: "bar",
}, },
], ],

2
src/view/echarts_work/ePjz.vue
View File

@ -131,7 +131,7 @@ const option = {
barWidth: 6, //外阴影背景宽 barWidth: 6, //外阴影背景宽
silent: true, // 不响应事件 silent: true, // 不响应事件
itemStyle: { itemStyle: {
color: "rgba(94, 178, 188, 0.2)", //外阴影背景 color: "rgba(94, 178, 188, 0.1)", //外阴影背景
}, },
}, },
{ {

3
src/view/education.vue
View File

@ -461,7 +461,8 @@ onBeforeMount(() => {
} }
.left_1 { .left_1 {
background-image: url(@/assets/eduImg/title1.png); // background-image: url(@/assets/eduImg/title1.png);
background-image: url(@/assets/eduImg/title5.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }

10
src/view/work.vue
View File

@ -54,12 +54,13 @@
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div> <div class="yd_title center_0"></div>
<div class="school"> <div class="school">
<ePjz></ePjz> <ePjz></ePjz>
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title center_1"></div>
<eP3></eP3> <eP3></eP3>
</div> </div>
<div class="flex1"> <div class="flex1">
@ -385,12 +386,19 @@ onBeforeMount(() => {
background-size: 100% 100%; background-size: 100% 100%;
} }
.center_0 {
background-image: url(@/assets/images/work/center1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center_1 { .center_1 {
background-image: url(@/assets/images/work/center.png); background-image: url(@/assets/images/work/center.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.right_1 { .right_1 {
background-image: url(@/assets/images/work/right_1.png); background-image: url(@/assets/images/work/right_1.png);
background-repeat: no-repeat; background-repeat: no-repeat;