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

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

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

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

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

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

@ -35,17 +35,176 @@ const data = reactive({
list2: [],
year: [],
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 = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
legend: {
data: ["特困补助金额", "低保补助金额"],
top: "5%",
right: "11%",
right: "28%",
textStyle: {
fontSize: 16,
color: "#ffffff",
@ -55,13 +214,14 @@ const getOption = () => {
top: "25%",
left: "1%",
right: "10%",
bottom: "5%",
bottom: "3%",
containLabel: true,
},
calculable: true,
xAxis: [
{
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
@ -69,27 +229,25 @@ const getOption = () => {
fontSize: 16,
},
},
data: data.year,
},
{
axisTick: false,
type: "category",
data: data.year,
axisLabel: {
show: false,
color: "#ffffff",
fontSize: 16,
},
},
],
yAxis: [
{
name: "特困补助金额",
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: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
color: "rgba(255, 255, 255, 0.2)",
fontSize: 16,
width: 1,
},
},
@ -100,95 +258,108 @@ const getOption = () => {
fontSize: 16,
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.3)",
},
},
axisLine: {
//y轴线的颜色以及宽度
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;
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
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",
data: data.list2,
barWidth: "18%",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
yAxisIndex: 0,
name: "特困补助金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
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)",
},
]),
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
label: {
show: true,
color: "#ffffff",
position: "top",
position:'bottom',
formatter: function (data) {
return data.value;
},
},
data: data.list1,
},
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
name: "低保补助金额",
type: "line",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: data.year.map(() => 100),
barWidth: 50,
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
data: data.list2,
},
],
};
@ -207,6 +378,9 @@ onBeforeMount(() => {
data.list1 = props.list1;
data.list2 = props.list2;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
@ -214,4 +388,5 @@ onBeforeMount(() => {
</script>
<style scoped>
</style>

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

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

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

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

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

@ -214,6 +214,14 @@ const getOption = () => {
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
]),
},
},
label:{
show:true,
position:'right',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
},
],