diff --git a/src/assets/eduImg/title5.png b/src/assets/eduImg/title5.png new file mode 100644 index 0000000..36a865d Binary files /dev/null and b/src/assets/eduImg/title5.png differ diff --git a/src/assets/images/work/center1.png b/src/assets/images/work/center1.png new file mode 100644 index 0000000..858b1d9 Binary files /dev/null and b/src/assets/images/work/center1.png differ diff --git a/src/view/echarts_education/eP1.vue b/src/view/echarts_education/eP1.vue index de954ea..b023212 100644 --- a/src/view/echarts_education/eP1.vue +++ b/src/view/echarts_education/eP1.vue @@ -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%", @@ -31,13 +31,14 @@ const option = { }, tooltip: { show: true, //---是否显示提示框,默认为true - trigger: "axis", - formatter: "{b0}:{c0}", + trigger: "axis", + formatter: "{b0}:{c0}" + "人", }, xAxis: [ { type: "value", scale: false, + max: newMaxNumber, axisLabel: { //坐标轴分割线 show: false, @@ -47,11 +48,11 @@ 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)", - }, - ], - }, - }, - }, - }, ], }; diff --git a/src/view/echarts_education/edCSR.vue b/src/view/echarts_education/edCSR.vue index 114f6ca..30bb781 100644 --- a/src/view/echarts_education/edCSR.vue +++ b/src/view/echarts_education/edCSR.vue @@ -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", }, ], diff --git a/src/view/echarts_work/ePjz.vue b/src/view/echarts_work/ePjz.vue index 295dea9..29fa28b 100644 --- a/src/view/echarts_work/ePjz.vue +++ b/src/view/echarts_work/ePjz.vue @@ -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)", //外阴影背景 }, }, { diff --git a/src/view/education.vue b/src/view/education.vue index a20dcc7..1b73e0b 100644 --- a/src/view/education.vue +++ b/src/view/education.vue @@ -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%; } diff --git a/src/view/work.vue b/src/view/work.vue index e3c8859..c989942 100644 --- a/src/view/work.vue +++ b/src/view/work.vue @@ -54,12 +54,13 @@
-
+
+
@@ -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;