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

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

This commit is contained in:
lnn19986213 2024-06-04 14:11:29 +08:00
parent f60133709b e373f23594
commit 1a4f081a4f
6 changed files with 535 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,32 +44,6 @@ const getOption = () => {
{ {
type: "category", type: "category",
axisLabel: { axisLabel: {
// formatter: function (params) {
// var str = ""; // 最终拼接成的字符串
// var paramsLen = params.length; // 获取每项文字的个数
// var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
// var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
// if (paramsLen > len) {
// //大于设定的len就换行，不大于就不变化
// for (var i = 0; i < rowNumber; i++) {
// var temp = ""; // 表示每一次截取的字符串
// var start = i * len; // 开始截取的位置
// var end = start + len; // 结束截取的位置
// if (i == rowNumber - 1) {
// // 最后一次不换行
// temp = params.substring(start, paramsLen);
// } else {
// // 每一次拼接字符串并换行
// temp = params.substring(start, end) + "\n";
// }
// str += temp; // 最终拼成的字符串
// }
// } else {
// // 给新的字符串赋值
// str = params;
// }
// return str; //返回字符串
// },
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 15, fontSize: 15,
@ -116,6 +90,7 @@ const getOption = () => {
], ],
series: [ series: [
{ {
z: 1,
name: "精神病健康居家在册管理人数", name: "精神病健康居家在册管理人数",
type: "bar", type: "bar",
data: data.rs, data: data.rs,
@ -131,65 +106,143 @@ const getOption = () => {
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function (params) {
// var colorList = [
// 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)",
// },
// ],
// false
// ),
// new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(255, 243, 119, 1)",
// },
// {
// offset: 1,
// color: "rgba(255, 242, 142, 0.20)",
// },
// ],
// 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
// ),
// ];
var colorList = [ var colorList = [
new echarts.graphic.LinearGradient( {
0, type: "linear",
0, x: 0,
0, x2: 1,
1, y: 0,
[ y2: 0,
{ colorStops: [
offset: 0, { offset: 0, color: "rgba(23, 237, 255, .7)" },
color: "rgba(23, 237, 255, 1)", { 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)" },
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
], ],
false },
), {
new echarts.graphic.LinearGradient( type: "linear",
0, x: 0,
0, x2: 1,
0, y: 0,
1, y2: 0,
[ colorStops: [
{ { offset: 0, color: "rgba(255, 242, 142, .7)" },
offset: 0, { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
color: "rgba(255, 243, 119, 1)", { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
}, { offset: 1, color: "rgba(255, 242, 142, .5)" },
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
], ],
false },
), {
new echarts.graphic.LinearGradient( type: "linear",
0, x: 0,
0, x2: 1,
0, y: 0,
1, y2: 0,
[ colorStops: [
{ { offset: 0, color: "rgba(142, 187, 255, .7)" },
offset: 0, { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
color: "rgba(142, 187, 255, 1)", { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
}, { offset: 1, color: "rgba(142, 187, 255, .5)" },
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
], ],
false },
),
]; ];
return colorList[params.dataIndex % colorList.length]; return colorList[params.dataIndex % colorList.length];
}, },
}, },
}, },
}, },
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.rs,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
], ],
}; };
}; };

437
src/view/echarts_hygiene/eP7.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue"; import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({ const props = defineProps({
@ -11,207 +11,304 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
year:{ year: {
type: Array, type: Array,
default: () => [], default: () => [],
} },
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
}); });
const data= reactive({
list:[],
year:[],
option:{},
bg:[],
})
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} ", formatter: "{b0}<br />{a0}:{c0} ",
}, },
grid: { grid: {
top: "15%", top: "15%",
left: "5%", left: "5%",
right: "10%", right: "10%",
bottom: "10%", bottom: "10%",
containLabel: true, containLabel: true,
}, },
calculable: true, calculable: true,
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
data: data.year,
},
{
axisTick: false,
type: "category",
data: data.year,
axisLabel: {
show: false,
},
},
],
yAxis: [
{
name: "历年体检人数",
type: "value",
nameTextStyle: {
// 设置Y轴名称的样式
fontSize: 14, // 这里设置字体大小为20
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
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: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
lineHeight: 19,
}, },
}, },
],
data: data.year, series: [
}, {
{ z: 1,
axisTick: false, name: "体检人数",
type: "category", type: "bar",
data: data.year, data: data.list,
axisLabel: { barWidth: 20,
show: false, label: {
},
},
],
yAxis: [
{
name: "历年体检人数",
type: "value",
nameTextStyle: { // 设置Y轴名称的样式
fontSize: 14 // 这里设置字体大小为20
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
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: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
fontSize: 16,
lineHeight: 19,
},
},
],
series: [
{
name: "体检人数",
type: "bar",
data: data.list,
barWidth: 20,
label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position:'top', position: "top",
formatter: function (data) { formatter: function (data) {
return data.value; 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(
return colorList[params.dataIndex % colorList.length]; // 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(142, 187, 255, 1)",
// },
// {
// offset: 1,
// color: "rgba(142, 187, 255, 0.20)",
// },
// ],
// false
// ),
// ];
var colorList = [
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ 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)" },
],
},
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ 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)" },
],
},
{
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
];
return colorList[params.dataIndex % colorList.length];
},
}, },
}, },
}, },
}, {
{ type: "bar",
type: "bar", xAxisIndex: 1,
xAxisIndex: 1, yAxisIndex: 1,
yAxisIndex: 1, itemStyle: {
itemStyle: { color: "rgba(221, 242, 255, 0.1)",
color: "rgba(221, 242, 255, 0.1)", },
data: data.bg.map(() => 100),
barWidth: 50,
}, },
data: data.bg.map(() => 100), {
barWidth: 50, z: 1,
}, name: "上部1",
], type: "pictorialBar",
symbolPosition: "end",
data: data.list,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [23, 15],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
{
offset: 1,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 1)",
},
];
return colorList[params.dataIndex % colorList.length].color;
},
},
},
// itemStyle: {
// borderColor: "#2fffa4",
// color: "rgba(142, 187, 255, 1)",
// },
},
],
};
}; };
}
const setChart = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
} };
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list data.list = props.list;
data.year = props.year data.year = props.year;
data.year.forEach(()=>{ data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>
<style scoped> <style scoped>

4
src/view/echarts_hygiene/pie.vue
View File

@ -126,7 +126,7 @@ const getOption = () => {
data: data.zgffrc, data: data.zgffrc,
symbol: "diamond", symbol: "diamond",
symbolOffset: ["-20%", "-50%"], symbolOffset: ["-20%", "-50%"],
symbolSize: [19, 10], symbolSize: [17, 10],
itemStyle: { itemStyle: {
borderColor: "#2fffa4", borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)", color: "rgba(142, 187, 255, 1)",
@ -183,7 +183,7 @@ const getOption = () => {
data: data.cxffrc, data: data.cxffrc,
symbol: "diamond", symbol: "diamond",
symbolOffset: [4, "-50%"], symbolOffset: [4, "-50%"],
symbolSize: [19, 10], symbolSize: [17, 10],
itemStyle: { itemStyle: {
borderColor: "#32ffee", borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)", color: "rgba(23, 237, 255, 1)",

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

@ -246,7 +246,7 @@ const getOption = () => {
yAxisIndex: 0, yAxisIndex: 0,
name: "特困救助人次", name: "特困救助人次",
data: data.list1, data: data.list1,
barWidth: 10, barWidth: 15,
type: "bar", type: "bar",
// itemStyle: { // itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -282,7 +282,7 @@ const getOption = () => {
yAxisIndex: 0, yAxisIndex: 0,
name: "低保救助人次", name: "低保救助人次",
data: data.list2, data: data.list2,
barWidth: 10, barWidth: 15,
type: "bar", type: "bar",
itemStyle: { itemStyle: {
color: { color: {
@ -318,7 +318,7 @@ const getOption = () => {
yAxisIndex: 0, yAxisIndex: 0,
name: "低边救助人次", name: "低边救助人次",
data: data.list3, data: data.list3,
barWidth: 10, barWidth: 15,
type: "bar", type: "bar",
itemStyle: { itemStyle: {
color: { color: {
@ -386,8 +386,8 @@ const getOption = () => {
symbolPosition: "end", symbolPosition: "end",
data: data.list1, data: data.list1,
symbol: "diamond", symbol: "diamond",
symbolOffset: ["-20%", "-50%"], symbolOffset: ["-45%", "-50%"],
symbolSize: [14, 8], symbolSize: [16, 8],
itemStyle: { itemStyle: {
borderColor: "#2fffa4", borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)", color: "rgba(142, 187, 255, 1)",
@ -401,7 +401,7 @@ const getOption = () => {
data: data.list2, data: data.list2,
symbol: "diamond", symbol: "diamond",
symbolOffset: ["0", "-50%"], symbolOffset: ["0", "-50%"],
symbolSize: [14, 8], symbolSize: [16, 8],
itemStyle: { itemStyle: {
borderColor: "#2fffa4", borderColor: "#2fffa4",
color: "rgba(23, 136, 255, 1)", color: "rgba(23, 136, 255, 1)",
@ -414,8 +414,8 @@ const getOption = () => {
symbolPosition: "end", symbolPosition: "end",
data: data.list3, data: data.list3,
symbol: "diamond", symbol: "diamond",
symbolOffset: [5, "-50%"], symbolOffset: [7.5, "-50%"],
symbolSize: [14, 8], symbolSize: [16, 8],
itemStyle: { itemStyle: {
borderColor: "#32ffee", borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)", color: "rgba(23, 237, 255, 1)",

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

@ -210,33 +210,49 @@ const getOption = () => {
], ],
series: [ series: [
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "计划生育人数", name: "计划生育人数",
data: data.list1, data: data.list1,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{ itemStyle: {
show:true, color: {
position:'inside', type: "linear",
color:'#ffffff', x: 0,
formatter:function(data){ x2: 1,
return data.value y: 0,
} y2: 0,
}, colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
position: "inside",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
{ {
yAxisIndex: 1, yAxisIndex: 1,
name: "计划生育补贴金额", name: "计划生育补贴金额",
data: data.list2, data: data.list2,
type: "line", //线状图 type: "line", //线状图
label:{ label: {
show:true, show: true,
position:'top', position: "top",
color:'#ffffff', color: "#ffffff",
formatter:function(data){ formatter: function (data) {
return data.value return data.value;
} },
}, },
itemStyle: { itemStyle: {
borderColor: "#00FCFF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,
@ -274,6 +290,21 @@ const getOption = () => {
}, },
type: "bar", type: "bar",
}, },
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
], ],
}; };
}; };

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

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 340px;height:250px"></div> <div ref="chart" style="width: 340px; height: 250px"></div>
</template> </template>
<script setup> <script setup>
@ -9,8 +9,8 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = [120, 200, 150, 80, 70, 110, 130]; const data = [120, 200, 150, 80, 70];
const lineData = [150, 230, 224, 218, 135, 147, 260]; const lineData = [150, 230, 224, 218, 135];
const max = data const max = data
.concat(lineData) .concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值 .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
@ -43,12 +43,7 @@ const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: { axisPointer: {},
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
}, },
legend: { legend: {
data: ["上门服务时长", "上门服务次数"], data: ["上门服务时长", "上门服务次数"],
@ -80,8 +75,8 @@ const option = {
}, },
}, },
axisTick: { axisTick: {
show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
}, },
data: ["4.07", "4.08", "4.09", "4.10", "4.11"], data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
}, },
{ {
@ -95,7 +90,6 @@ const option = {
type: "value", type: "value",
scale: true, scale: true,
name: "时长/小时", name: "时长/小时",
max: max,
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -127,8 +121,8 @@ const option = {
scale: true, scale: true,
name: "次数/次", name: "次数/次",
min: 0, min: 0,
max: max, splitLine: {
splitLine: {//分割线配置 //分割线配置
show: false, show: false,
lineStyle: { lineStyle: {
color: "rgba(255, 255, 255, 0.3)", color: "rgba(255, 255, 255, 0.3)",
@ -136,7 +130,8 @@ const option = {
fontSize: 16, fontSize: 16,
}, },
}, },
axisLabel: {//y轴文字的配置 axisLabel: {
//y轴文字的配置
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
@ -153,32 +148,74 @@ const option = {
}, },
}, },
}, },
{
type: "value",
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
},
], ],
series: [ series: [
{ {
z: 1,
yAxisIndex: 0,
name: "上门服务时长", name: "上门服务时长",
data: data, data: data,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{ itemStyle: {
show:true, color: {
color:'#ffffff', type: "linear",
formatter:function(data){ x: 0,
return data.value x2: 1,
} y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
}, },
}, },
{ {
yAxisIndex: 1,
name: "上门服务次数", name: "上门服务次数",
data: lineData, data: lineData,
type: "line", //线状图 type: "line", //线状图
label:{ label: {
show:true, show: true,
position:'top', position: "top",
color:'#ffffff', color: "#ffffff",
formatter:function(data){ formatter: function (data) {
return data.value return data.value;
} },
}, },
itemStyle: { itemStyle: {
borderColor: "#00FCFF", borderColor: "#00FCFF",
@ -188,10 +225,11 @@ const option = {
}, },
{ {
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: { itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景 color: "rgba(180, 180, 180, 0.2)", //外阴影背景
}, },
data: data.map(() => max), data: data.map(() => 100),
barWidth: 40, //外阴影背景宽 barWidth: 40, //外阴影背景宽
emphasis: { emphasis: {
itemStyle: { itemStyle: {
@ -216,6 +254,21 @@ const option = {
}, },
type: "bar", type: "bar",
}, },
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
], ],
}; };