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

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

@ -7,7 +7,7 @@ import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
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 data2 = [
"10000人",
@ -18,10 +18,10 @@ const data2 = [
"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 = {
// color,
// calculable: true,
grid: {
top: "6%",
left: "9%",
@ -32,12 +32,13 @@ const option = {
tooltip: {
show: true, //---是否显示提示框,默认为true
trigger: "axis",
formatter: "{b0}:{c0}",
formatter: "{b0}:{c0}" + "人",
},
xAxis: [
{
type: "value",
scale: false,
max: newMaxNumber,
axisLabel: {
//坐标轴分割线
show: false,
@ -47,10 +48,10 @@ const option = {
},
axisLine: {
//y轴线的颜色以及宽度
show: false // 取消x轴线
show: false, // 取消x轴线
},
splitLine: {
show: false,//---grid 区域中的分隔线
show: false, //---grid 区域中的分隔线
},
axisTick: {
show: false, // 设置轴刻度不显示
@ -97,7 +98,7 @@ const option = {
position: "right",
axisLine: {
//---坐标轴 轴线
show: false // 取消轴线
show: false, // 取消轴线
},
axisLabel: {
//---坐标轴 标签
@ -114,114 +115,59 @@ const option = {
series: [
{
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, //柱宽
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
// 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)" },
// // ])},
// // ],
// },
// },
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
["rgba(0, 230, 255, 1)", "rgba(0, 230, 255, 0.2)"],
["rgba(0, 255, 208,1)", "rgba(0, 255, 208, 0.20)"],
["rgba(255, 234, 90, 1)", "rgba(255, 234, 90, 0.20)"],
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 230, 255, 0)" },
{ 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 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
);
}
return colorList[params.dataIndex % colorList.length];
},
},
},
@ -233,42 +179,10 @@ const option = {
color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF",
position: ["99%", -1],
position: ["99%", -1.5],
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,
showBackground: true,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
normal: {
color: "rgba(180, 180, 180, 0)", //外阴影背景
}
},
// data: data.map(() => max),
data: data,
data: data.map(() => Math.max(...data) * 1.02),
barWidth: 40, //外阴影背景宽
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)",
},
],
},
},
},
// 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)",
// },
// ],
// },
// },
// },
type: "bar",
},
],

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

@ -131,7 +131,7 @@ const option = {
barWidth: 6, //外阴影背景宽
silent: true, // 不响应事件
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 {
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-size: 100% 100%;
}

10
src/view/work.vue
View File

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