Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
commit
d07c48d8b7
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
|
|
@ -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%",
|
||||||
|
|
@ -32,12 +32,13 @@ 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,10 +48,10 @@ 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)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ const data = reactive({
|
||||||
// const datas = {
|
// const datas = {
|
||||||
// value: 18,
|
// value: 18,
|
||||||
// };
|
// };
|
||||||
var colors = ["#4EC2FF", "#FF805C", "#12F7D5", "#268FFF", "#FFE986"];
|
var colors = ["#00FFFB", "#FF9E2C", "#F74951", "#D7FF00", "#0050FF", "#00FB7D"];
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
color: colors,
|
color: colors,
|
||||||
|
|
@ -54,7 +54,7 @@ const getOption = () => {
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
center: ["50%", "50%"],
|
center: ["50%", "50%"],
|
||||||
radius: ["60%", "82%"],
|
radius: ["60%", "80%"],
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
clockWise: false,
|
clockWise: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|
@ -70,6 +70,9 @@ const getOption = () => {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
labelLayout: {
|
||||||
|
hideOverlap: false, // 是否隐藏重叠标签
|
||||||
|
},
|
||||||
data: [100],
|
data: [100],
|
||||||
},
|
},
|
||||||
/*内心原型图，展示整体数据概览*/
|
/*内心原型图，展示整体数据概览*/
|
||||||
|
|
@ -82,12 +85,14 @@ const getOption = () => {
|
||||||
clockWise: true,
|
clockWise: true,
|
||||||
startAngle: 180,
|
startAngle: 180,
|
||||||
minShowLabelAngle: 30,
|
minShowLabelAngle: 30,
|
||||||
|
minAngle: 50, //最小角度
|
||||||
|
startAngle: 100, //起始角度
|
||||||
// hoverAnimation: false,
|
// hoverAnimation: false,
|
||||||
label: {
|
label: {
|
||||||
//文字部分 显示内容为{b}：{c}可以换自己像显示的
|
//文字部分 显示内容为{b}：{c}可以换自己像显示的
|
||||||
//最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
|
//最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
|
||||||
//{hr|}为圆点显示内容
|
//{hr|}为圆点显示内容
|
||||||
formatter: "{hr|} {a|{b} {c}}\n\n",
|
formatter: "{hr|}{a|{b} {c}}\n\n",
|
||||||
color: "#fffdef", //折线图文字颜色
|
color: "#fffdef", //折线图文字颜色
|
||||||
borderWidth: 10,
|
borderWidth: 10,
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
|
|
@ -100,10 +105,10 @@ const getOption = () => {
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
width: 3,
|
width: 3,
|
||||||
height: 3,
|
height: 3,
|
||||||
padding: [3, 3, 0, -12],
|
padding: [3, 13, 0, -22],
|
||||||
},
|
},
|
||||||
a: {
|
a: {
|
||||||
padding: [-12, 10, -20, 15],
|
padding: [-16, 10, -20, 20],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -111,7 +116,6 @@ const getOption = () => {
|
||||||
color: "white", // 改变标示文字的颜色
|
color: "white", // 改变标示文字的颜色
|
||||||
fontSize: 13, //文字大小
|
fontSize: 13, //文字大小
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true, //数据标签引导线
|
show: true, //数据标签引导线
|
||||||
|
|
@ -123,9 +127,11 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
labelLayout: {
|
||||||
|
hideOverlap: false, // 是否隐藏重叠标签
|
||||||
|
},
|
||||||
data: data.list,
|
data: data.list,
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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%",
|
||||||
|
|
@ -32,12 +32,13 @@ 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,10 +48,10 @@ 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: {
|
||||||
//---坐标轴 标签
|
//---坐标轴 标签
|
||||||
|
|
@ -112,116 +113,53 @@ 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.05), // 外阴影铺满整个柱状图
|
||||||
|
barWidth: 6, //外阴影背景宽
|
||||||
|
silent: true, // 不响应事件
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(94, 178, 188, 0.1)", //外阴影背景
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 +171,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)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue