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

gx

This commit is contained in:
姚宇浩 2024-06-04 14:18:03 +08:00
parent e373f23594
commit abea3bc3af
4 changed files with 161 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/view/echarts_education/edCSR.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%;height: 250px"></div> <div ref="chart" style="width: 100%; height: 250px"></div>
</template> </template>
<script setup> <script setup>
@ -9,12 +9,7 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = [20, 20, 50, 80, 70, 10, 30]; const data = [200, 120, 150, 110, 70];
// const lineData = [150, 230, 224, 218, 135, 147, 260];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// // 背景颜色
const color = [ const color = [
{ {
type: "linear", type: "linear",
@ -80,14 +75,14 @@ const option = {
}, },
}, },
axisTick: { axisTick: {
show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
}, },
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",], data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
}, },
{ {
type: "category", type: "category",
show: false, show: false,
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",], data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
}, },
], ],
yAxis: [ yAxis: [
@ -122,74 +117,95 @@ const option = {
}, },
}, },
}, },
// { {
// type: "value", type: "value",
// scale: true, min: 0,
// // name: "次数/次", max: 100,
// min: 0, splitLine: {
// max: max, show: false,
// splitLine: {//分割线配置 lineStyle: {
// show: false, type: "solid",
// lineStyle: { color: "rgb(221, 242, 255,0.1)",
// color: "#ffffff", },
// width: 1, },
// }, axisLine: {
// }, show: false,
// axisLabel: {//y轴文字的配置 lineStyle: {
// textStyle: { type: "dotted",
// color: "#ffffff", },
// }, },
// }, axisLabel: {
// axisLine: { show: false,
// //y轴线的颜色以及宽度 fontSize: 16,
// show: false, fontFamily: "MicrosoftYaHei",
// lineStyle: { color: "#ffffff",
// color: "#ffffff", fontSize: 16,
// width: 1, lineHeight: 19,
// type: "solid", },
// }, },
// },
// },
], ],
series: [ series: [
{ {
z: 1,
// name: "上门服务时长", // name: "上门服务时长",
data: data, data: data,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{ itemStyle: {
show:true, color: {
position:'top', type: "linear",
color:'#ffffff', x: 0,
formatter:function(data){ x2: 1,
return data.value y: 0,
} y2: 0,
colorStops: [
{ offset: 0, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .3)" },
{ offset: 1, color: "rgba(47, 168, 215, .5)" },
],
},
},
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
}, },
}, },
// { //外阴影
// // name: "上门服务次数",
// data: lineData,
// type: "line", //线状图
// itemStyle: {
// borderColor: "#00FCFF",
// borderWidth: 1,
// color: "#00FCFF",
// },
// },
{ {
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1,
showBackground: true, showBackground: true,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgba(180, 180, 180, 0)", //外阴影背景 color: "rgba(180, 180, 180, 0)", //外阴影背景
} },
}, },
// data: data.map(() => max), // data: data.map(() => max),
data: data.map(() => Math.max(...data) * 1.02), data: data.map(() => 100),
barWidth: 40, //外阴影背景宽 barWidth: 40, //外阴影背景宽
type: "bar", type: "bar",
}, },
//头部
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(47, 168, 215, 1)",
},
},
], ],
}; };

38
src/view/echarts_work/eP1.vue
View File

@ -213,6 +213,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "救助人数", name: "救助人数",
data: data.list1, data: data.list1,
@ -227,16 +228,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(255, 243, 119, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(255, 242, 142, 0.20)", { offset: 0, color: "rgba(255, 242, 142, .7)" },
}, { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
]), { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
},
}, },
}, },
{ {
@ -270,6 +274,20 @@ const getOption = () => {
data: data.list.year.map(() => 100), data: data.list.year.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(255, 242, 142, 1)",
},
},
], ],
}; };
}; };

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

@ -47,12 +47,6 @@ const data = reactive({
// max: null, // max: null,
}); });
// const data1 = [120, 200, 50, 80, 70];
// const lineData = [1500, 2300, 204, 2018, 1305];
// const max = data1
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
@ -213,6 +207,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "救助人数", name: "救助人数",
data: data.list1, data: data.list1,
@ -227,16 +222,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { offset: 0, color: "rgba(23, 237, 255, .7)" },
}, { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
]), { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
}, },
}, },
{ {
@ -271,6 +269,21 @@ const getOption = () => {
// data: 100, // data: 100,
barWidth: 50, barWidth: 50,
}, },
//顶部圆片
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
], ],
}; };
}; };

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

@ -209,6 +209,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "生活补贴人数", name: "生活补贴人数",
data: data.list1, data: data.list1,
@ -223,16 +224,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { offset: 0, color: "rgba(23, 237, 255, .7)" },
}, { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
]), { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
}, },
}, },
{ {
@ -266,6 +270,20 @@ const getOption = () => {
data: data.list.year.map(() => 100), data: data.list.year.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
], ],
}; };
}; };