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

1

This commit is contained in:
姚宇浩 2024-05-13 16:08:48 +08:00
parent a297d468bc
commit b8b895ebe6
4 changed files with 176 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/view/echarts_work/eP2.vue
View File

@ -44,7 +44,6 @@ const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
},
legend: {
data: ["救助金额", "救助人数"],
@ -89,7 +88,7 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
max: maxRs+50,
splitLine: {
//分割线配置
show: false,
@ -118,7 +117,7 @@ const option = {
type: "value",
scale: true,
min: 0,
max: maxJe+50,
name: "救助金额/万",
splitLine: {
show: false,
@ -143,6 +142,31 @@ const option = {
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
],
series: [
{
@ -160,6 +184,7 @@ const option = {
},
},
{
yAxisIndex: 0,
name: "救助人数",
data: data,
barWidth: 20,
@ -178,12 +203,9 @@ const option = {
},
},
{
type: "bar",
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.map(() => max+50),
barWidth: 40, //外阴影背景宽
yAxisIndex: 2,
emphasis: {
itemStyle: {
color: {
@ -205,7 +227,11 @@ const option = {
},
},
},
type: "bar",
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
barWidth: 50,
},
],
};

36
src/view/echarts_work/eP3.vue
View File

@ -94,7 +94,7 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
max: maxRs+50,
splitLine: {
//分割线配置
show: false,
@ -123,7 +123,7 @@ const option = {
type: "value",
scale: true,
min: 0,
max: maxJe+50,
name: "救助金额/万",
splitLine: {
show: false,
@ -148,7 +148,31 @@ const option = {
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
],
series: [
{
@ -174,6 +198,7 @@ const option = {
},
},
{
yAxisIndex: 0,
name: "特困救助人次",
data: data,
barWidth: 10,
@ -192,6 +217,7 @@ const option = {
},
},
{
yAxisIndex: 0,
name: "低保救助人次",
data: data2,
barWidth: 10,
@ -210,6 +236,7 @@ const option = {
},
},
{
yAxisIndex: 0,
name: "低边救助人次",
data: data3,
barWidth: 10,
@ -228,11 +255,12 @@ const option = {
},
},
{
yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.map(() => max),
data: data.map(() => 100),
barWidth: 60, //外阴影背景宽
emphasis: {
itemStyle: {

79
src/view/echarts_work/eP4.vue
View File

@ -29,8 +29,7 @@ const color = [
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}",
},
legend: {
@ -83,7 +82,7 @@ const option = {
type: "value",
scale: true,
name: "补贴人数",
max: max,
splitLine: {
//分割线配置
show: false,
@ -112,7 +111,7 @@ const option = {
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/元",
splitLine: {
show: false,
@ -137,29 +136,35 @@ const option = {
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
],
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",
},
},
{
yAxisIndex: 0,
name: "困难残疾人生活补贴人数",
data: data,
barWidth: 10,
@ -179,6 +184,7 @@ const option = {
},
{
yAxisIndex: 0,
name: "护理补贴人数",
data: data2,
barWidth: 10,
@ -197,11 +203,34 @@ const option = {
},
},
{
yAxisIndex: 1,
name: "困难残疾人生活补贴金额",
data: lineData,
type: "line", //线状图
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
{
yAxisIndex: 1,
name: "护理补贴金额",
data: lineData2,
type: "line", //线状图
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#2468FF",
},
},
{
yAxisIndex: 2,
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.map(() => max),
data: data.map(() => 100),
barWidth: 60, //外阴影背景宽
emphasis: {
itemStyle: {

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

@ -8,7 +8,7 @@ import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [120, 200, 50, 80, 70];
const data = [120, 150, 250, 255, 170];
const lineData = [150, 230, 24, 218, 135];
const max = data
.concat(lineData)
@ -51,13 +51,13 @@ const option = {
},
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a1}:{c0}<br/>{a2}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
formatter: "{b0}<br/> {a1}:{c1}<br/>{a2}:{c2}",
// axisPointer: {
// type: "cross",
// label: {
// backgroundColor: "#3F82F7", //提示文字标题颜色
// },
// },
},
grid: {
left: "6%",
@ -92,7 +92,6 @@ const option = {
type: "value",
scale: true,
name: "救助人数",
max: max,
splitLine: {
//分割线配置
show: false,
@ -121,7 +120,7 @@ const option = {
type: "value",
scale: true,
min: 0,
max: max,
name: "救助金额/万",
splitLine: {
show: false,
@ -146,24 +145,51 @@ const option = {
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
],
series: [
// 数据低下的圆片
{
yAxisIndex: 0,
name: "",
type: "pictorialBar",
symbolSize: [20, 5], // 宽，高
symbolOffset: [0, 2], // 左 上
symbolSize: [30, 5], // 宽，高
symbolOffset: [0, 1], // 左 上
z: 12,
symbol: 'circle', // 图形形状为圆
symbol: "circle", // 图形形状为圆
itemStyle: {
color: "rgba(38, 191, 254, 1)",
// color: "red",
},
data: data,
data: data.map(()=>0),
},
// 数据的条形图
{
yAxisIndex: 1,
name: "总救助金额",
data: lineData,
type: "line", //线状图
@ -178,9 +204,10 @@ const option = {
},
// 数据的柱状图
{
yAxisIndex: 0,
name: "总救助人数",
data: data,
barWidth: 20,
barWidth: 30,
type: "bar",
itemStyle: {
// borderColor: "#00FCFF",
@ -201,11 +228,18 @@ const option = {
//外阴影背景
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
normal: {
// borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [10, 10, 0, 0], //圆角边框
// color: "rgba(94, 178, 188, 0.3)", //外阴影背景
color: "rgba(180, 180, 180, 0.2)", //背景颜色
},
data: data.map(() => max),
barWidth: 40, //外阴影背景宽
},
data: data.map(() => 100),
barWidth: 30, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
@ -231,10 +265,11 @@ const option = {
},
// 数据顶部的样式
{
yAxisIndex: 0,
name: "",
type: "pictorialBar",
symbol: "circle",
symbolSize: [20, 8],
symbolSize: [30, 8],
symbolOffset: [0, -4],
z: 3,
itemStyle: {
@ -312,8 +347,6 @@ const option = {
// ]
};
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);