Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
duanxiaohai 2024-04-18 14:52:32 +08:00
commit 9f42dbaee3
14 changed files with 1970 additions and 375 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

View File

@ -1,150 +0,0 @@
<template>
<div ref="chart" style="width:100%;height:300px;"></div>
</template>
<script setup >
import {onMounted, reactive, ref} from "vue";
// echarts
import * as echarts from 'echarts'
const chart =ref(); // DOM
var plantCap = [{
name: '中国工程院 \n\n 院士'
}, {
name: '计算机应用 \n\n 专家'
}, {
name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授'
}, {
name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
}, {
name: '浙江大学信息 \n\n 学部主任'
}, {
name: '博士生导师'
}];
var datalist = [{
offset: [10, 73],
symbolSize: 90,
opacity: .95,
color: '#C58F5A'
}, {
offset: [40, 63],
symbolSize: 90,
opacity: .88,
color: '#076097'
}, {
offset: [80, 73],
symbolSize: 130,
opacity: .84,
color: '#BF74CF'
}, {
offset: [20, 23],
symbolSize: 140,
opacity: .84,
color: '#2D90ED'
}, {
offset: [60, 23],
symbolSize: 95,
opacity: .84,
color: '#079773'
}, {
offset: [90, 33],
symbolSize: 80,
opacity: .84,
color: '#C89D4A'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
let option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
color: '#00acea'
}
},
data: datas
}]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value)
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
window.addEventListener('resize',()=>{
myChart.resize()
})
})
</script>
<style scoped>
</style>

View File

@ -0,0 +1,231 @@
<template>
<div ref="chart" style="width: 100%; height: 330px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [120, 200, 50, 80, 70];
const lineData = [150, 230, 24, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
//
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 0.5,
color: "rgba(142, 187, 255, 0.5)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
legend: {
data: ["救助金额", "救助人数"],
top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
grid: {
left: "6%",
right: "9%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "救助人数",
max: max,
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/万",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "救助金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
name: "救助人数",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
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)",
},
],
},
},
},
type: "bar",
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -0,0 +1,230 @@
<template>
<div ref="chart" style="width: 100%; height: 330px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [120, 200, 50, 80, 70];
const lineData = [150, 230, 24, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
//
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 0.5,
color: "rgba(142, 187, 255, 0.5)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
legend: {
data: ["救助金额", "救助人数"],
top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
grid: {
left: "6%",
right: "9%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "救助人数",
max: max,
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/万",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "救助金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
name: "救助人数",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
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)",
},
],
},
},
},
type: "bar",
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -0,0 +1,329 @@
<template>
<div ref="chart" style="width: 100%; height: 280px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [120, 200, 50, 80, 70];
const data2 = [12, 20, 5, 8, 7];
const data3 = [20, 100, 40, 80, 70];
const lineData = [150, 230, 24, 218, 135];
const lineData2 = [15, 23, 4, 18, 15];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
//
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
// legend: [
// {
// orient: "horizontal",
// icon: "circle",
// align: "left",
// bottom: "0",
// itemWidth: 8,
// itemHeight: 8,
// y: "20",
// x: "center",
// data: ["", ""],
// formatter: (name) => {
// return `{b|${name}} `;
// },
// textStyle: {
// color: "#999999",
// fontSize: 12,
// align: "left",
// //
// backgroundColor: "transparent",
// rich: {
// b: {
// width: 200,
// },
// },
// },
// },
// {
// orient: "horizontal",
// icon: "circle",
// align: "left",
// bottom: "0",
// itemWidth: 8,
// itemHeight: 8,
// y: "40",
// x: "center",
// data: ["", "", "/"],
// formatter: (name) => {
// return `{a|${name}} `;
// },
// textStyle: {
// color: "#999999",
// fontSize: 12,
// align: "left",
// //
// backgroundColor: "transparent",
// rich: {
// a: {
// width: 200,
// },
// },
// },
// },
// ],
legend: {
data: [
"特困救助金额",
"低保救助金额",
"",
"特困救助人次",
"低保救助人次",
"低边救助人次",
],
top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
grid: {
top: "28%",
left: "6%",
right: "9%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "救助人数",
max: max,
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/万",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "特困救助金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
name: "低保救助金额",
data: lineData2,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
name: "特困救助人次",
data: data,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
name: "低保救助人次",
data: data2,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
},
},
{
name: "低边救助人次",
data: data3,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
barWidth: 60, //
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",
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -0,0 +1,255 @@
<template>
<div ref="chart" style="width: 100%; height: 360px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [120, 200, 50, 80, 70];
const data2 = [12, 20, 5, 8, 7];
const lineData = [150, 230, 24, 218, 135];
const lineData2 = [15, 23, 4, 18, 15];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
//
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
legend: {
data: [
"困难残疾人生活补贴人数",
"护理补贴人数",
"",
"困难残疾人生活补贴金额",
"护理补贴金额",
],
top: "3%",
textStyle: {
fontSize: 12,
color: "#ffffff", //
},
},
grid: {
top: "25%",
left: "6%",
right: "9%",
bottom: "5%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, //
},
data: ["2019", "2020", "2021", "2022", "2023"],
},
{
type: "category",
show: false,
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "补贴人数",
max: max,
splitLine: {
//线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/元",
splitLine: {
show: false,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "困难残疾人生活补贴金额",
data: lineData,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
name: "护理补贴金额",
data: lineData2,
type: "line", //线
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
name: "困难残疾人生活补贴人数",
data: data,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
]),
},
},
{
name: "护理补贴人数",
data: data2,
barWidth: 10,
type: "bar",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
},
},
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.map(() => max),
barWidth: 60, //
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",
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -69,8 +69,6 @@ let option = {
}, },
{ {
type: "value", type: "value",
min: 0,
max: 100,
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {

File diff suppressed because it is too large Load Diff