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

gx

This commit is contained in:
姚宇浩 2024-05-24 10:18:54 +08:00
parent c791769427
commit 4b0c60c97c
6 changed files with 378 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/view/echarts_hygiene/eP5.vue
View File

@ -84,8 +84,9 @@ const getOption = () => {
{ {
name: "在册数", name: "在册数",
type: "value", type: "value",
nameTextStyle: { // 设置Y轴名称的样式 nameTextStyle: {
fontSize: 14 // 这里设置字体大小为20 // 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -119,47 +120,73 @@ const getOption = () => {
type: "bar", type: "bar",
data: data.rs, data: data.rs,
barWidth: 20, barWidth: 20,
label: {
show: true,
color: "#ffffff",
position: "top",
formatter: function (data) {
return data.value;
},
},
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
var colorList = [ var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [ new echarts.graphic.LinearGradient(
{ 0,
offset: 0, 0,
color: "rgba(23, 237, 255, 1)", 0,
}, 1,
{ [
offset: 1, {
color: "rgba(23, 237, 255, 0.20)", offset: 0,
}, color: "rgba(23, 237, 255, 1)",
], },
false), {
new echarts.graphic.LinearGradient(0, 0, 0, 1, [ offset: 1,
{ color: "rgba(23, 237, 255, 0.20)",
offset: 0, },
color: "rgba(255, 243, 119, 1)", ],
}, false
{ ),
offset: 1, new echarts.graphic.LinearGradient(
color: "rgba(255, 242, 142, 0.20)", 0,
}, 0,
], 0,
false), 1,
new echarts.graphic.LinearGradient(0, 0, 0, 1, [ [
{ {
offset: 0, offset: 0,
color: "rgba(142, 187, 255, 1)", color: "rgba(255, 243, 119, 1)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(142, 187, 255, 0.20)", color: "rgba(255, 242, 142, 0.20)",
}, },
], ],
false), false
]; ),
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)",
},
],
false
),
];
return colorList[params.dataIndex % colorList.length]; return colorList[params.dataIndex % colorList.length];
}, },
}, },
}, },
}, },

39
src/view/echarts_sy/pie.vue
View File

@ -175,16 +175,16 @@ const getOption = () => {
legend: [ legend: [
{ {
orient: "vertical", orient: "vertical",
right: "6%", right: "1%",
top: "10%", top: "16%",
itemWidth: 25, // 可以设置图例标记的宽度 itemWidth: 20, // 可以设置图例标记的宽度
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴 itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
itemGap: 19, itemGap: 20,
itemStyle: { // itemStyle: {
borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色 // borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
borderWidth: 10, // 图例边框宽度 // borderWidth: 10, // 图例边框宽度
borderRadius: 20, // borderRadius: 20,
}, // },
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 14, fontSize: 14,
@ -197,11 +197,16 @@ const getOption = () => {
}, },
}, },
data: data.list, data: data.list,
formatter: (name) => {
if (data.list.length) { //格式化图例文本
const item = data.list.filter((item) => item.name === name)[0]; formatter: function (name) {
return `{name|${name}}`; var target;
for (var i = 0, l = data.list.length; i < l; i++) {
if (data.list[i].name == name) {
target = data.list[i].value;
}
} }
return `${name}:${target} 人`;
}, },
}, },
], ],
@ -221,8 +226,8 @@ const getOption = () => {
{ {
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: ["20%", "85%"], radius: ["15%", "80%"],
center: ["25%", "50%"], center: ["20%", "50%"],
label: { label: {
position: "inside", position: "inside",
formatter(item) { formatter(item) {
@ -263,8 +268,8 @@ const getOption = () => {
{ {
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: ["20%", "87%"], radius: ["15%", "82%"],
center: ["25%", "50%"], center: ["20%", "50%"],
label: { label: {
show: false, show: false,
}, },

357
src/view/echarts_yl/eP3_2.vue
View File

@ -35,17 +35,176 @@ const data = reactive({
list2: [], list2: [],
year: [], year: [],
option: {}, option: {},
bg:[]
}); });
// const getOption = () => {
// data.option = {
// tooltip: {
// trigger: "axis",
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
// },
// legend: {
// top: "5%",
// right: "11%",
// textStyle: {
// fontSize: 16,
// color: "#ffffff",
// },
// },
// grid: {
// top: "25%",
// left: "1%",
// right: "10%",
// bottom: "5%",
// containLabel: true,
// },
// calculable: true,
// xAxis: [
// {
// type: "category",
// axisLabel: {
// //坐标轴刻度标签的相关设置
// textStyle: {
// color: "#ffffff",
// fontSize: 16,
// },
// },
// data: data.year,
// },
// {
// axisTick: false,
// type: "category",
// data: data.year,
// axisLabel: {
// show: false,
// color: "#ffffff",
// fontSize: 16,
// },
// },
// ],
// yAxis: [
// {
// type: "value",
// splitLine: {
// show: true,
// lineStyle: {
// color: "rgba(226, 226, 226, 0.3)",
// width: 1,
// },
// },
// axisLabel: {
// //坐标轴刻度标签的相关设置
// textStyle: {
// color: "#ffffff",
// fontSize: 16,
// },
// },
// },
// {
// type: "value",
// min: 0,
// max: 100,
// splitLine: {
// show: false,
// lineStyle: {
// type: "solid",
// color: "rgb(221, 242, 255,0.3)",
// },
// },
// axisLine: {
// show: false,
// lineStyle: {
// type: "dotted",
// },
// },
// axisLabel: {
// show: false,
// fontSize: 16,
// color: "#DEF1FF",
// fontFamily: "MicrosoftYaHei",
// lineHeight: 19,
// },
// },
// ],
// series: [
// {
// name: "特困补助金额",
// type: "bar",
// data: data.list1,
// barWidth: "18%",
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: "rgba(162, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(162, 187, 255, 0.20)",
// },
// ]),
// },
// label: {
// show: true,
// color: "#ffffff",
// position: "top",
// formatter: function (data) {
// return data.value;
// },
// },
// },
// {
// name: "低保补助金额",
// type: "bar",
// data: data.list2,
// barWidth: "18%",
// 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)",
// },
// ]),
// },
// label: {
// show: true,
// color: "#ffffff",
// position: "top",
// formatter: function (data) {
// return data.value;
// },
// },
// },
// {
// type: "bar",
// xAxisIndex: 1,
// yAxisIndex: 1,
// itemStyle: {
// color: "rgba(221, 242, 255, 0.1)",
// },
// data: data.year.map(() => 100),
// barWidth: 50,
// },
// ],
// };
// };
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ", padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
}, },
legend: { legend: {
data: ["特困补助金额", "低保补助金额"],
top: "5%", top: "5%",
right: "11%", right: "28%",
textStyle: { textStyle: {
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
@ -55,41 +214,40 @@ const getOption = () => {
top: "25%", top: "25%",
left: "1%", left: "1%",
right: "10%", right: "10%",
bottom: "5%", bottom: "3%",
containLabel: true, containLabel: true,
}, },
calculable: true,
xAxis: [ xAxis: {
{ type: "category",
type: "category", // boundaryGap: false,
axisLabel: { data: data.year,
//坐标轴刻度标签的相关设置 axisLabel: {
textStyle: { //坐标轴刻度标签的相关设置
color: "#ffffff", textStyle: {
fontSize: 16,
},
},
data: data.year,
},
{
axisTick: false,
type: "category",
data: data.year,
axisLabel: {
show: false,
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
}, },
}, },
], },
yAxis: [ yAxis: [
{ {
name: "特困补助金额",
type: "value", type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50;
},
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "rgba(226, 226, 226, 0.3)", color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1, width: 1,
}, },
}, },
@ -100,95 +258,108 @@ const getOption = () => {
fontSize: 16, fontSize: 16,
}, },
}, },
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.3)",
},
},
axisLine: { axisLine: {
//y轴线的颜色以及宽度
show: false, show: false,
lineStyle: { lineStyle: {
type: "dotted", color: "#ffffff",
}, fontSize: 16,
}, width: 1,
axisLabel: { type: "solid",
show: false,
fontSize: 16,
color: "#DEF1FF",
fontFamily: "MicrosoftYaHei",
lineHeight: 19,
},
},
],
series: [
{
name: "特困补助金额",
type: "bar",
data: data.list1,
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(162, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(162, 187, 255, 0.20)",
},
]),
},
label: {
show: true,
color: "#ffffff",
position: "top",
formatter: function (data) {
return data.value;
}, },
}, },
}, },
{ {
name: "低保补助金额", name: "低保补助金额",
type: "value",
min: 0, // 设置Y轴最小值
max: function (value) {
// 自定义Y轴最大值，确保数据点显示在顶部
return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50;
},
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "背景",
type: "bar", type: "bar",
data: data.list2, data: data.bg,
barWidth: "18%", showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "特困补助金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ borderColor: "#00FCFF",
{ borderWidth: 1,
offset: 0, color: "#00FCFF",
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
}, },
label: { label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position: "top", position:'bottom',
formatter: function (data) { formatter: function (data) {
return data.value; return data.value;
}, },
}, },
data: data.list1,
}, },
{ {
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
name: "低保补助金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: { itemStyle: {
color: "rgba(221, 242, 255, 0.1)", borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
}, },
data: data.year.map(() => 100), label: {
barWidth: 50, show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list2,
}, },
], ],
}; };
@ -207,6 +378,9 @@ onBeforeMount(() => {
data.list1 = props.list1; data.list1 = props.list1;
data.list2 = props.list2; data.list2 = props.list2;
data.year = props.year; data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);
@ -214,4 +388,5 @@ onBeforeMount(() => {
</script> </script>
<style scoped> <style scoped>
</style> </style>

2
src/view/echarts_yl/ylJHSY.vue
View File

@ -232,7 +232,7 @@ const getOption = () => {
label:{ label:{
show:true, show:true,
position:'top', position:'top',
color:'rgba(0, 252, 255, 1)', color:'#ffffff',
formatter:function(data){ formatter:function(data){
return data.value return data.value
} }

15
src/view/echarts_yl/ylSMFW.vue
View File

@ -160,11 +160,26 @@ const option = {
data: data, data: data,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{
show:true,
color:'#ffffff',
formatter:function(data){
return data.value
}
},
}, },
{ {
name: "上门服务次数", name: "上门服务次数",
data: lineData, data: lineData,
type: "line", //线状图 type: "line", //线状图
label:{
show:true,
position:'top',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
itemStyle: { itemStyle: {
borderColor: "#00FCFF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,

8
src/view/echarts_yl/ylXZZC.vue
View File

@ -215,6 +215,14 @@ const getOption = () => {
]), ]),
}, },
}, },
label:{
show:true,
position:'right',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
}, },
], ],
}; };